This commit is contained in:
guopenghui 2024-05-23 13:16:10 +00:00 committed by GitHub
commit ad6ae53b04
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 106 additions and 12 deletions

View File

@ -20,6 +20,7 @@ const context = await esbuild.context({
external: [
"obsidian",
"electron",
"codemirror",
"@codemirror/autocomplete",
"@codemirror/collab",
"@codemirror/commands",
@ -45,4 +46,4 @@ if (prod) {
process.exit(0);
} else {
await context.watch();
}
}

27
main.ts
View File

@ -1,4 +1,5 @@
import { Plugin } from "obsidian";
import { Plugin, loadPrism } from "obsidian";
import { SwarnamMode } from "./mode";
const PREFIX = "swarnam";
@ -48,10 +49,21 @@ function showError(msg: string, root: HTMLElement) {
}
export default class SwarnamPlugin extends Plugin {
private prismLoaded = false
async onload() {
// add highlight in edit mode
this.register(SwarnamMode())
this.registerMarkdownCodeBlockProcessor(
"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` });
let [
@ -96,7 +108,7 @@ export default class SwarnamPlugin extends Plugin {
text: "HTML",
cls: `${PREFIX}-badge ${PREFIX}-html-badge`,
});
htmlEl.setText(htmlSource);
htmlEl.innerHTML = h(htmlSource, "html");
if (cssSource) {
const cssContainer = sourceRoot.createDiv({
@ -109,7 +121,7 @@ export default class SwarnamPlugin extends Plugin {
text: "CSS",
cls: `${PREFIX}-badge ${PREFIX}-css-badge`,
});
cssEl.setText(cssSource);
cssEl.innerHTML = h(cssSource, "css");
}
if (jsSource) {
@ -125,7 +137,7 @@ export default class SwarnamPlugin extends Plugin {
text: "JS",
cls: `${PREFIX}-badge ${PREFIX}-js-badge`,
});
jsEl.setText(jsSource);
jsEl.innerHTML = h(jsSource, "javascript");
}
const iframeEl = root.createEl("iframe", {
@ -139,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);
}

65
mode.ts Normal file
View File

@ -0,0 +1,65 @@
import type * as CODE_MIRROR from "codemirror"
declare const CodeMirror: typeof CODE_MIRROR
type State = {
curSegment: "html" | "css" | "js"
htmlState: any,
cssState: any,
jsState: any
}
function advance(state: State) {
if(state.curSegment === "html") {
state.curSegment = "css"
} else if(state.curSegment === "css") {
state.curSegment = "js"
}
}
export function SwarnamMode() {
CodeMirror.defineMode("swarnam", (config) => {
const htmlMode = CodeMirror.getMode(config, "htmlmixed")
const cssMode = CodeMirror.getMode(config, "css")
const jsMode = CodeMirror.getMode(config, "javascript")
return {
startState(): State {
const htmlState = CodeMirror.startState(htmlMode)
const cssState = CodeMirror.startState(cssMode)
const jsState = CodeMirror.startState(jsMode)
return {
curSegment: "html",
htmlState,
cssState,
jsState
}
},
token(stream, state: State): string | null {
let style = null;
if(stream.string.trim() === "---*---") {
stream.skipToEnd()
advance(state)
}else if(state.curSegment === "html") {
style = htmlMode.token(stream, state.htmlState)
}else if(state.curSegment === "css") {
style = cssMode.token(stream, state.cssState)
}else if(state.curSegment === "js") {
style = jsMode.token(stream, state.jsState)
}
return style
},
}
},
//@ts-ignore
"html", "css", "javascript"
)
return () => {
delete CodeMirror.modes.swarnam
}
}

20
package-lock.json generated
View File

@ -1,14 +1,15 @@
{
"name": "obsidian-sample-plugin",
"version": "1.0.0",
"version": "1.0.1",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "obsidian-sample-plugin",
"version": "1.0.0",
"version": "1.0.1",
"license": "MIT",
"devDependencies": {
"@types/codemirror": "^5.60.15",
"@types/node": "^16.11.6",
"@typescript-eslint/eslint-plugin": "5.29.0",
"@typescript-eslint/parser": "5.29.0",
@ -532,9 +533,9 @@
}
},
"node_modules/@types/codemirror": {
"version": "5.60.8",
"resolved": "https://registry.npmjs.org/@types/codemirror/-/codemirror-5.60.8.tgz",
"integrity": "sha512-VjFgDF/eB+Aklcy15TtOTLQeMjTo07k7KAjql8OK5Dirr7a6sJY4T1uVBDuTVG9VEmn1uUsohOpYnVfgC6/jyw==",
"version": "5.60.15",
"resolved": "https://registry.npmjs.org/@types/codemirror/-/codemirror-5.60.15.tgz",
"integrity": "sha512-dTOvwEQ+ouKJ/rE9LT1Ue2hmP6H1mZv5+CCnNWu2qtiOe2LQa9lCprEY20HxiDmV/Bxh+dXjywmy5aKvoGjULA==",
"dev": true,
"dependencies": {
"@types/tern": "*"
@ -1753,6 +1754,15 @@
"@codemirror/view": "^6.0.0"
}
},
"node_modules/obsidian/node_modules/@types/codemirror": {
"version": "5.60.8",
"resolved": "https://registry.npmjs.org/@types/codemirror/-/codemirror-5.60.8.tgz",
"integrity": "sha512-VjFgDF/eB+Aklcy15TtOTLQeMjTo07k7KAjql8OK5Dirr7a6sJY4T1uVBDuTVG9VEmn1uUsohOpYnVfgC6/jyw==",
"dev": true,
"dependencies": {
"@types/tern": "*"
}
},
"node_modules/once": {
"version": "1.4.0",
"resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",

View File

@ -12,6 +12,7 @@
"author": "",
"license": "MIT",
"devDependencies": {
"@types/codemirror": "^5.60.15",
"@types/node": "^16.11.6",
"@typescript-eslint/eslint-plugin": "5.29.0",
"@typescript-eslint/parser": "5.29.0",

View File

@ -27,7 +27,7 @@
.swarnam-source-root {
flex: 1 1 0;
overflow-x: scroll;
overflow-x: auto;
display: flex;
align-items: stretch;
flex-direction: column;