diff --git a/lib/classes/StudipCoreFormat.php b/lib/classes/StudipCoreFormat.php index 7e3358c8aab8c07d7ba39aea2b51daee339c7dbc..718d10f96215b58349adfd81ecd09d66ba01571c 100644 --- a/lib/classes/StudipCoreFormat.php +++ b/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) + ); } /** diff --git a/resources/assets/javascripts/lib/markup.js b/resources/assets/javascripts/lib/markup.js index 89eb0a37122b8743d8c3248db693391f143190a8..777105693d853aff196c5040567c73726fb56ab4 100644 --- a/resources/assets/javascripts/lib/markup.js +++ b/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); }); diff --git a/resources/assets/stylesheets/studip.scss b/resources/assets/stylesheets/studip.scss index bf4022a96ea8c51b48fde7013f5d64991f114723..7369a8bb5f80d438a1ec6f7e215badf1d36f2a2c 100644 --- a/resources/assets/stylesheets/studip.scss +++ b/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;