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

client: Set up simple preview for syntax highlight

Browse Source
This commit is contained in:
Elian Doran 2024-10-27 20:18:44 +02:00
parent 2fdff29067
commit 83f5b47c99
No known key found for this signature in database
1 changed files with 33 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
src/public/app/widgets/type_widgets/options/appearance/highlighting.js
View File

@ -2,6 +2,15 @@ import library_loader from "../../../../services/library_loader.js";
import server from "../../../../services/server.js"; import server from "../../../../services/server.js";
import OptionsWidget from "../options_widget.js"; import OptionsWidget from "../options_widget.js";
const SAMPLE_LANGUAGE = "javascript";
const SAMPLE_CODE = `\
function test(name) {
console.log("Works");
console.info("Test");
// Hello world.
}
`
const TPL = ` const TPL = `
<div class="options-section"> <div class="options-section">
<h4>Syntax highlighting</h4> <h4>Syntax highlighting</h4>
@ -12,11 +21,23 @@ const TPL = `
<select class="theme-select form-select"></select> <select class="theme-select form-select"></select>
</div> </div>
</div> </div>
<div class="form-group row">
<div class="note-detail-readonly-text-content ck-content code-sample-wrapper">
<pre><code class="code-sample"></code></pre>
</div>
</div>
<style>
.code-sample-wrapper {
margin-top: 1em;
}
</style>
</div> </div>
`; `;
export default class HighlightingOptions extends OptionsWidget { export default class HighlightingOptions extends OptionsWidget {
doRender() { doRender() {
this.$widget = $(TPL); this.$widget = $(TPL);
this.$themeSelect = this.$widget.find(".theme-select"); this.$themeSelect = this.$widget.find(".theme-select");
this.$themeSelect.on("change", async () => { this.$themeSelect.on("change", async () => {
@ -24,6 +45,17 @@ export default class HighlightingOptions extends OptionsWidget {
library_loader.loadHighlightingTheme(newTheme); library_loader.loadHighlightingTheme(newTheme);
await server.put(`options/highlightingTheme/${newTheme}`); await server.put(`options/highlightingTheme/${newTheme}`);
}); });
// Set up preview
const sampleEl = this.$widget.find(".code-sample");
library_loader
.requireLibrary(library_loader.HIGHLIGHT_JS)
.then(() => {
const highlightedText = hljs.highlight(SAMPLE_CODE, {
language: SAMPLE_LANGUAGE
});
sampleEl.html(highlightedText.value);
});
} }
async optionsLoaded(options) { async optionsLoaded(options) {