x/swarnam-obsidian
1
0
Fork 0
mirror of https://github.com/runofthemillgeek/swarnam-obsidian.git synced 2025-04-19 01:50:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: add syntax highlight in preview mode

Browse Source
This commit is contained in:
guopenghui 2024-05-23 20:43:30 +08:00
parent c8d0a319bc
commit 877c9d7877
1 changed files with 21 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
main.ts
View File

@ -1,4 +1,4 @@
import { MarkdownView, Plugin } from "obsidian"; import { Plugin, loadPrism } from "obsidian";
import { SwarnamMode } from "./mode"; import { SwarnamMode } from "./mode";
const PREFIX = "swarnam"; const PREFIX = "swarnam";
@ -49,12 +49,21 @@ function showError(msg: string, root: HTMLElement) {
} }
export default class SwarnamPlugin extends Plugin { export default class SwarnamPlugin extends Plugin {
private prismLoaded = false
async onload() { async onload() {
// add highlight in edit mode
this.register(SwarnamMode()) this.register(SwarnamMode())
this.registerMarkdownCodeBlockProcessor( this.registerMarkdownCodeBlockProcessor(
"swarnam", "swarnam",
(source, el, ctx) => { async (source, el, ctx) => {
// load Prism.js to add highlight in preview mode
if(!this.prismLoaded) {
await loadPrism()
this.prismLoaded = true
}
const root = el.createDiv({ cls: `${PREFIX}-root` }); const root = el.createDiv({ cls: `${PREFIX}-root` });
let [ let [
@ -99,7 +108,7 @@ export default class SwarnamPlugin extends Plugin {
text: "HTML", text: "HTML",
cls: `${PREFIX}-badge ${PREFIX}-html-badge`, cls: `${PREFIX}-badge ${PREFIX}-html-badge`,
}); });
htmlEl.setText(htmlSource); htmlEl.innerHTML = h(htmlSource, "html");
if (cssSource) { if (cssSource) {
const cssContainer = sourceRoot.createDiv({ const cssContainer = sourceRoot.createDiv({
@ -112,7 +121,7 @@ export default class SwarnamPlugin extends Plugin {
text: "CSS", text: "CSS",
cls: `${PREFIX}-badge ${PREFIX}-css-badge`, cls: `${PREFIX}-badge ${PREFIX}-css-badge`,
}); });
cssEl.setText(cssSource); cssEl.innerHTML = h(cssSource, "css");
} }
if (jsSource) { if (jsSource) {
@ -128,7 +137,7 @@ export default class SwarnamPlugin extends Plugin {
text: "JS", text: "JS",
cls: `${PREFIX}-badge ${PREFIX}-js-badge`, cls: `${PREFIX}-badge ${PREFIX}-js-badge`,
}); });
jsEl.setText(jsSource); jsEl.innerHTML = h(jsSource, "javascript");
} }
const iframeEl = root.createEl("iframe", { const iframeEl = root.createEl("iframe", {
@ -142,3 +151,8 @@ export default class SwarnamPlugin extends Plugin {
); );
} }
} }
function h(code: string, mode: string) {
// @ts-ignore
return Prism.highlight(code, Prism.languages[mode], mode);
}