Use the correct font in the help examples

Author: shepmaster

ui/frontend/HelpExample.tsx

@@ -6,6 +6,7 @@ import * as actions from './actions';
 import { useAppDispatch } from './hooks';
 
 import * as styles from './HelpExample.module.css';
+import prismOverrides from './prismjs-overrides.css';
 import prismTheme from 'prismjs/themes/prism-okaidia.css';
 
 export interface HelpExampleProps {
@@ -23,6 +24,7 @@ const HelpExample: React.FC<HelpExampleProps> = ({ code }) => {
       </button>
       <root.div>
         <link href={prismTheme} rel="stylesheet" />
+        <link href={prismOverrides} rel="stylesheet" />
 
         <Prism language="rust">{code}</Prism>
       </root.div>

ui/frontend/declarations.d.ts

@@ -8,6 +8,11 @@ declare module 'prismjs/themes/*.css' {
   export default content;
 }
 
+declare module '*prismjs-overrides.css' {
+  const content: string;
+  export default content;
+}
+
 declare module '*.svg' {
   const content: string;
   export default content;

ui/frontend/prismjs-overrides.css

@@ -0,0 +1,5 @@
+code[class*='language-'],
+pre[class*='language-'] {
+  font-family: 'Source Code Pro', monospace;
+  font-optical-sizing: auto;
+}

ui/frontend/webpack.config.js

@@ -92,10 +92,13 @@ module.exports = function(_, argv) {
         {
           test: /\.css$/,
           oneOf: [
+            // Prism styles as separate files for the shadow DOM
             {
-              test: /prismjs\/themes/,
+              test: [/prismjs\/themes/, /prismjs-overrides.css$/],
               type: 'asset/resource',
             },
+
+            // Our normal CSS
             {
               test: /\.module.css$/,
               exclude: /node_modules/,
@@ -112,6 +115,8 @@ module.exports = function(_, argv) {
                 "postcss-loader",
               ],
             },
+
+            // Everything else
             {
               include: /node_modules/,
               use: [