diff --git a/htdocs/js/SampleProblemViewer/sample-problem.js b/htdocs/js/SampleProblemViewer/sample-problem.js
index 7907504d2f..aea4fd72f7 100644
--- a/htdocs/js/SampleProblemViewer/sample-problem.js
+++ b/htdocs/js/SampleProblemViewer/sample-problem.js
@@ -1,5 +1,5 @@
-for (const pre of document.body.querySelectorAll('pre.CodeMirror')) {
-	CodeMirror.runMode(pre.textContent, 'PG', pre);
+for (const pre of document.body.querySelectorAll('pre.PGCodeMirror')) {
+	PGCodeMirrorEditor.runMode(pre.textContent, pre);
 }
 
 for (const btn of document.querySelectorAll('.clipboard-btn')) {
diff --git a/htdocs/js/SampleProblemViewer/sample-problem.scss b/htdocs/js/SampleProblemViewer/sample-problem.scss
index 4d42527785..f94287b838 100644
--- a/htdocs/js/SampleProblemViewer/sample-problem.scss
+++ b/htdocs/js/SampleProblemViewer/sample-problem.scss
@@ -1,4 +1,4 @@
-pre.CodeMirror {
+pre.PGCodeMirror {
 	background-color: #fcfaf1;
 }
 
diff --git a/htdocs/package-lock.json b/htdocs/package-lock.json
index 4390973468..147ffd9c42 100644
--- a/htdocs/package-lock.json
+++ b/htdocs/package-lock.json
@@ -8,7 +8,7 @@
             "license": "GPL-2.0+",
             "dependencies": {
                 "@fortawesome/fontawesome-free": "^6.5.2",
-                "@openwebwork/pg-codemirror-editor": "^0.0.1-beta.25",
+                "@openwebwork/pg-codemirror-editor": "^0.0.1-beta.26",
                 "bootstrap": "~5.3.3",
                 "flatpickr": "^4.6.13",
                 "iframe-resizer": "^4.3.11",
@@ -332,9 +332,9 @@
             }
         },
         "node_modules/@openwebwork/pg-codemirror-editor": {
-            "version": "0.0.1-beta.25",
-            "resolved": "https://registry.npmjs.org/@openwebwork/pg-codemirror-editor/-/pg-codemirror-editor-0.0.1-beta.25.tgz",
-            "integrity": "sha512-3SajSiabBlRF6tuCfz/angik+Dphl0fQ2olZP+dCe1LK8xVQ4zgcA7RLKZNyUn5NWuqhplwWdHslqVh6E56A4w==",
+            "version": "0.0.1-beta.26",
+            "resolved": "https://registry.npmjs.org/@openwebwork/pg-codemirror-editor/-/pg-codemirror-editor-0.0.1-beta.26.tgz",
+            "integrity": "sha512-nT2NnHVZ/hfh4yTfk7scV13bHkQ8us8IG82adOr4G9DGpCrBK6xQ5dU+fY5YdYvg9n9DCm4EoRv9FaeXsvr/mg==",
             "license": "MIT",
             "dependencies": {
                 "@codemirror/lang-html": "^6.4.9",
@@ -354,6 +354,7 @@
                 "codemirror": "^6.0.1",
                 "codemirror-lang-mt": "^0.0.2-beta.3",
                 "codemirror-lang-perl": "^0.1.5-beta.4",
+                "style-mod": "^4.1.2",
                 "thememirror": "^2.0.1"
             }
         },
@@ -2394,9 +2395,9 @@
             }
         },
         "@openwebwork/pg-codemirror-editor": {
-            "version": "0.0.1-beta.25",
-            "resolved": "https://registry.npmjs.org/@openwebwork/pg-codemirror-editor/-/pg-codemirror-editor-0.0.1-beta.25.tgz",
-            "integrity": "sha512-3SajSiabBlRF6tuCfz/angik+Dphl0fQ2olZP+dCe1LK8xVQ4zgcA7RLKZNyUn5NWuqhplwWdHslqVh6E56A4w==",
+            "version": "0.0.1-beta.26",
+            "resolved": "https://registry.npmjs.org/@openwebwork/pg-codemirror-editor/-/pg-codemirror-editor-0.0.1-beta.26.tgz",
+            "integrity": "sha512-nT2NnHVZ/hfh4yTfk7scV13bHkQ8us8IG82adOr4G9DGpCrBK6xQ5dU+fY5YdYvg9n9DCm4EoRv9FaeXsvr/mg==",
             "requires": {
                 "@codemirror/lang-html": "^6.4.9",
                 "@codemirror/lang-xml": "^6.1.0",
@@ -2415,6 +2416,7 @@
                 "codemirror": "^6.0.1",
                 "codemirror-lang-mt": "^0.0.2-beta.3",
                 "codemirror-lang-perl": "^0.1.5-beta.4",
+                "style-mod": "^4.1.2",
                 "thememirror": "^2.0.1"
             }
         },
diff --git a/htdocs/package.json b/htdocs/package.json
index ccd3809993..678ec1e179 100644
--- a/htdocs/package.json
+++ b/htdocs/package.json
@@ -14,7 +14,7 @@
     },
     "dependencies": {
         "@fortawesome/fontawesome-free": "^6.5.2",
-        "@openwebwork/pg-codemirror-editor": "^0.0.1-beta.25",
+        "@openwebwork/pg-codemirror-editor": "^0.0.1-beta.26",
         "bootstrap": "~5.3.3",
         "flatpickr": "^4.6.13",
         "iframe-resizer": "^4.3.11",
diff --git a/templates/ContentGenerator/SampleProblemViewer/sample_problem.html.ep b/templates/ContentGenerator/SampleProblemViewer/sample_problem.html.ep
index 329ee2bf48..cfe5d26785 100644
--- a/templates/ContentGenerator/SampleProblemViewer/sample_problem.html.ep
+++ b/templates/ContentGenerator/SampleProblemViewer/sample_problem.html.ep
@@ -12,13 +12,10 @@
 		type => 'webwork', name => 'htdocs',
 		file => 'node_modules/@fortawesome/fontawesome-free/css/all.min.css'
 	}) =%>
-	<%= stylesheet $c->url({ type => 'webwork', name => 'htdocs',
-		file => 'node_modules/codemirror/lib/codemirror.css' }) =%>
 	<%= stylesheet $c->url({ type => 'webwork', name => 'htdocs',
 		file => 'js/SampleProblemViewer/sample-problem.css' }) =%>
 	<%= javascript $c->url({ type => 'webwork', name => 'htdocs',
-		file => 'node_modules/codemirror/addon/runmode/runmode-standalone.js' }), defer => undef =%>
-	<%= javascript $c->url({ type => 'webwork', name => 'htdocs', file => 'js/PGCodeMirror/PG.js' }), defer => undef =%>
+		file => 'node_modules/@openwebwork/pg-codemirror-editor/dist/pg-codemirror-editor.js' }), defer => undef =%>
 	<%= javascript $c->url({ type => 'webwork', name => 'htdocs',
 		file => 'js/SampleProblemViewer/sample-problem.js' }), defer => undef =%>
 </head>
@@ -94,7 +91,7 @@
 						type="button" data-code="<%= $_->{code} %>" aria-label="<%= maketext('copy to clipboard') %>">
 						<i class="fa-regular fa-clipboard fa-xl"></i>
 					</button>
-					<pre class="CodeMirror cm-s-default m-0 h-100 p-3 border border-secondary overflow-scroll"><% =%>\
+					<pre class="PGCodeMirror m-0 h-100 p-3 border border-secondary overflow-scroll"><% =%>\
 						<%= $_->{code} =%>\
 					</pre><% =%>\
 				</div>