Tools/Notes
1
0
Fork 0
mirror of https://github.com/TriliumNext/Notes.git synced 2025-08-01 12:42:28 +08:00
Code Issues Packages Projects Releases Wiki Activity

client: Refactor syntax highlighting for read-only text into service

Browse Source
This commit is contained in:
Elian Doran 2024-10-31 22:11:59 +02:00
parent 4d783f1879
commit 3af29a78dc
No known key found for this signature in database
2 changed files with 46 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
src/public/app/services/syntax_highlight.js Normal file
View File

@ -0,0 +1,44 @@
import mime_types from "./mime_types.js";
export function applySyntaxHighlight($container) {
const codeBlocks = $container.find("pre code");
for (const codeBlock of codeBlocks) {
$(codeBlock).parent().toggleClass("hljs");
const text = codeBlock.innerText;
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;
}
}
}
/**
* 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;
}

47
src/public/app/widgets/type_widgets/read_only_text.js
View File

@ -1,6 +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";
import { applySyntaxHighlight } from "../../services/syntax_highlight.js";
const TPL = `
<div class="note-detail-readonly-text note-detail-printable">
@ -69,23 +69,6 @@ const TPL = `
</div>
`;
/**
* 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"; }
@ -130,33 +113,7 @@ export default class ReadOnlyTextTypeWidget extends AbstractTextTypeWidget {
renderMathInElement(this.$content[0], {trust: true});
}
this.#setupSyntaxHighlight();
}
#setupSyntaxHighlight() {
const codeBlocks = this.$content.find("pre code");
for (const codeBlock of codeBlocks) {
$(codeBlock).parent().toggleClass("hljs");
const text = codeBlock.innerText;
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;
}
}
applySyntaxHighlight(this.$content);
}
async refreshIncludedNoteEvent({noteId}) {