diff --git a/bun.lockb b/bun.lockb index 1d94372..703acd8 100755 Binary files a/bun.lockb and b/bun.lockb differ diff --git a/package.json b/package.json index da7cd70..062425e 100644 --- a/package.json +++ b/package.json @@ -5,8 +5,10 @@ }, "dependencies": { "@types/yaml-front-matter": "^4.1.3", + "highlight.js": "^11.10.0", "hono": "^4.4.13", "marked": "^13.0.2", + "marked-highlight": "^2.1.3", "remark": "^15.0.1", "yaml-front-matter": "^4.1.1" }, diff --git a/src/assets/static/tomorrow.css b/src/assets/static/tomorrow.css new file mode 100644 index 0000000..8cf8a38 --- /dev/null +++ b/src/assets/static/tomorrow.css @@ -0,0 +1,44 @@ +/* Tomorrow Theme */ +/* https://jmblog.github.io/color-themes-for-google-code-highlightjs */ +/* Original theme - https://github.com/chriskempson/tomorrow-theme */ +/* https://jmblog.github.io/color-themes-for-google-code-highlightjs */ +.tomorrow-comment, pre .comment, pre .title { + color: #8e908c; +} + +.tomorrow-red, pre .variable, pre .attribute, pre .tag, pre .regexp, pre .ruby .constant, pre .xml .tag .title, pre .xml .pi, pre .xml .doctype, pre .html .doctype, pre .css .id, pre .css .class, pre .css .pseudo { + color: #c82829; +} + +.tomorrow-orange, pre .number, pre .preprocessor, pre .built_in, pre .literal, pre .params, pre .constant { + color: #f5871f; +} + +.tomorrow-yellow, pre .class, pre .ruby .class .title, pre .css .rules .attribute { + color: #eab700; +} + +.tomorrow-green, pre .string, pre .value, pre .inheritance, pre .header, pre .ruby .symbol, pre .xml .cdata { + color: #718c00; +} + +.tomorrow-aqua, pre .css .hexcolor { + color: #3e999f; +} + +.tomorrow-blue, pre .function, pre .python .decorator, pre .python .title, pre .ruby .function .title, pre .ruby .title .keyword, pre .perl .sub, pre .javascript .title, pre .coffeescript .title { + color: #4271ae; +} + +.tomorrow-purple, pre .keyword, pre .javascript .function { + color: #8959a8; +} + +pre code { + display: block; + background: white; + color: #4d4d4c; + line-height: 1.5; + border: 1px solid #ccc; + padding: 10px; +} diff --git a/src/services/post-file.ts b/src/services/post-file.ts index 85098b0..0a23281 100644 --- a/src/services/post-file.ts +++ b/src/services/post-file.ts @@ -2,12 +2,27 @@ import { POST_PATH } from "@blog/config"; import { readdir } from "node:fs/promises"; import type { Post } from "@blog/models/Post"; import * as yamlFront from "yaml-front-matter"; -import { marked } from "marked"; +import { Marked } from "marked"; +import { markedHighlight } from "marked-highlight"; +import hljs from "highlight.js"; + +export function getMarkedInstance(): Marked { + return new Marked( + markedHighlight({ + langPrefix: 'hljs language-', + highlight(code, lang, info) { + const language = hljs.getLanguage(lang) ? lang : 'plaintext'; + return hljs.highlight(code, { language }).value; + } + }) + ) +} export async function readPostFile(path: string): Promise { const file = Bun.file(path); const fileContent = await file.text(); const parsedData = yamlFront.loadFront(fileContent); + const marked: Marked = getMarkedInstance(); const postHtml = await marked.parse(parsedData.__content); let slug = parsedData.slug; diff --git a/src/templates/Page.tsx b/src/templates/Page.tsx index 4b961e3..bc243fc 100644 --- a/src/templates/Page.tsx +++ b/src/templates/Page.tsx @@ -14,6 +14,7 @@ export function Page({ children, meta }: { children: any, meta: SiteMeta }) {