fix syntax highlighting, fixes #4650

Closes #4650

Merge request studip/studip!3459

lib/classes/StudipCoreFormat.php

@@ -501,9 +501,11 @@ class StudipCoreFormat extends TextFormat
             $codetype = " ".decodeHTML(trim(mb_substr($matches[1], 1)), ENT_QUOTES);
         }
         $code = decodeHTML(trim($matches[2]), ENT_QUOTES);
-        return sprintf('<pre class="usercode %1$s"><code class="%1$s">%2$s</code></pre>',
-                       htmlReady($codetype),
-                       htmlReady($code));
+        return sprintf(
+            '<pre><code class="%s">%s</code></pre>',
+            $codetype ? htmlReady("language-{$codetype}") : '',
+            htmlReady($code)
+        );
     }
 
     /**

resources/assets/javascripts/lib/markup.js

@@ -29,7 +29,7 @@ const Markup = {
             });
         },
         codehighlight: function (element) {
-            $('pre.usercode:not(.hljs)', element).each(function (index, block) {
+            $('pre code[class^="language-"]:not(.hljs)', element).each(function (index, block) {
                 STUDIP.loadChunk('code-highlight').then((hljs) => {
                     hljs.highlightBlock(block);
                 });

resources/assets/stylesheets/studip.scss

@@ -474,7 +474,14 @@ h1:hover, h2:hover, h3:hover, h4:hover {
     color: var(--base-gray);
 }
 
-pre.usercode {
+pre {
+    &:has(code[class^="language-"]),
+    &.usercode {
+        margin: 0 0 10px;
+    }
+}
+pre code[class^="language-"],
+pre.usercode code {
     padding: 5px;
     background-color: rgba(255, 255, 255, 0.5);
     border: hsla(0, 0%, 0%, 0.1) 5px solid;