diff --git a/src/public/app/widgets/type_widgets/read_only_text.js b/src/public/app/widgets/type_widgets/read_only_text.js
index c382dc189..d1cb267c8 100644
--- a/src/public/app/widgets/type_widgets/read_only_text.js
+++ b/src/public/app/widgets/type_widgets/read_only_text.js
@@ -1,5 +1,6 @@
import AbstractTextTypeWidget from "./abstract_text_type_widget.js";
import libraryLoader from "../../services/library_loader.js";
+import mime_types from "../../services/mime_types.js";
const TPL = `
@@ -68,6 +69,23 @@ const TPL = `
`;
+/**
+ * Given a HTML element, tries to extract the `language-` class name out of it.
+ *
+ * @param {string} el the HTML element from which to extract the language tag.
+ * @returns the normalized MIME type (e.g. `text-css` instead of `language-text-css`).
+ */
+function extractLanguageFromClassList(el) {
+ const prefix = "language-";
+ for (const className of el.classList) {
+ if (className.startsWith(prefix)) {
+ return className.substr(prefix.length);
+ }
+ }
+
+ return null;
+}
+
export default class ReadOnlyTextTypeWidget extends AbstractTextTypeWidget {
static getType() { return "readOnlyText"; }
@@ -112,12 +130,30 @@ export default class ReadOnlyTextTypeWidget extends AbstractTextTypeWidget {
renderMathInElement(this.$content[0], {trust: true});
}
- // Enable syntax highlight
+ this.#setupSyntaxHighlight();
+ }
+
+ #setupSyntaxHighlight() {
const codeBlocks = this.$content.find("pre code");
for (const codeBlock of codeBlocks) {
const text = codeBlock.innerText;
- const highlightedText = hljs.highlightAuto(text).value;
- codeBlock.innerHTML = highlightedText;
+
+ const normalizedMimeType = extractLanguageFromClassList(codeBlock);
+ if (!normalizedMimeType) {
+ continue;
+ }
+
+ let highlightedText = null;
+ if (normalizedMimeType === mime_types.MIME_TYPE_AUTO) {
+ highlightedText = hljs.highlightAuto(text);
+ } else if (normalizedMimeType) {
+ const language = mime_types.getHighlightJsNameForMime(normalizedMimeType);
+ highlightedText = hljs.highlight(text, { language });
+ }
+
+ if (highlightedText) {
+ codeBlock.innerHTML = highlightedText.value;
+ }
}
}