feat(notes): render code files with Shikiji syntax highlighting

Non-markdown files opened as stacked notes are now highlighted using
the existing markdown-it-shikiji pipeline (4-backtick fence wrapping)
with a h1 filename heading. Edit controls are hidden for code files.
Adds alloy language grammar and a fileLanguage utility mapping
extensions to Shikiji language IDs.
This commit is contained in:
Julien Calixte
2026-04-27 19:57:15 +02:00
parent 812f393283
commit 9d6f70546e
4 changed files with 329 additions and 5 deletions

View File

@@ -11,9 +11,11 @@ import markdownItCheckbox from "markdown-it-checkbox"
import MarkdownItGitHubAlerts from "markdown-it-github-alerts"
import markdownItIframe from "markdown-it-iframe"
import Shikiji from "markdown-it-shikiji"
import type { LanguageRegistration } from "shikiji-core"
import mermaid from "mermaid"
import { Ref, toValue } from "vue"
import alloyGrammar from "@/utils/alloy.tmLanguage.json"
import { decodeBase64ToUTF8 } from "@/utils/decodeBase64ToUTF8"
import { html5Media } from "@/utils/markdown/markdown-html5-media"
import { markdownItTablerIcons } from "@/utils/markdown/markdown-it-tabler-icons"
@@ -116,7 +118,12 @@ export const useShikiji = async () => {
"mermaid",
"html",
"css",
"json"
"json",
{
...alloyGrammar,
name: "alloy",
aliases: ["als"]
} as unknown as LanguageRegistration
]
})
)
@@ -157,6 +164,19 @@ const renderMarkdown = (content: string, env?: Record<string, unknown>) => {
return env ? md.render(content, env) : md.render(content)
}
export const renderCodeFile = async (
rawContent: string,
lang: string | null,
filename?: string
): Promise<string> => {
await useShikiji()
const heading = filename ? `# ${filename}\n\n` : ""
if (lang !== null) {
return renderMarkdown(`${heading}\`\`\`\`${lang}\n${rawContent}\n\`\`\`\``)
}
return `${renderMarkdown(heading)}<pre><code>${md.utils.escapeHtml(rawContent)}</code></pre>`
}
export const markdownBuilder = (defaultPrefix?: Ref<string> | string) => {
const getRawContent = (content: string) => decodeBase64ToUTF8(content)
const renderFromUTF8 = (content: string, prefix?: string) => {