Add syntax highlighting to markdown code blocks

This commit is contained in:
Sergii Kozak 2025-12-17 20:15:44 -08:00
parent 4ec2708bb3
commit f8e6d62db7
4 changed files with 313 additions and 11 deletions

View file

@ -40,6 +40,7 @@ export interface MarkdownTheme {
italic: (text: string) => string;
strikethrough: (text: string) => string;
underline: (text: string) => string;
highlightCode?: (code: string, lang?: string) => string[];
}
export class Markdown implements Component {
@ -263,10 +264,17 @@ export class Markdown implements Component {
case "code": {
lines.push(this.theme.codeBlockBorder("```" + (token.lang || "")));
// Split code by newlines and style each line
const codeLines = token.text.split("\n");
for (const codeLine of codeLines) {
lines.push(" " + this.theme.codeBlock(codeLine));
if (this.theme.highlightCode) {
const highlightedLines = this.theme.highlightCode(token.text, token.lang);
for (const hlLine of highlightedLines) {
lines.push(" " + hlLine);
}
} else {
// Split code by newlines and style each line
const codeLines = token.text.split("\n");
for (const codeLine of codeLines) {
lines.push(" " + this.theme.codeBlock(codeLine));
}
}
lines.push(this.theme.codeBlockBorder("```"));
if (nextTokenType !== "space") {
@ -471,9 +479,16 @@ export class Markdown implements Component {
} else if (token.type === "code") {
// Code block in list item
lines.push(this.theme.codeBlockBorder("```" + (token.lang || "")));
const codeLines = token.text.split("\n");
for (const codeLine of codeLines) {
lines.push(" " + this.theme.codeBlock(codeLine));
if (this.theme.highlightCode) {
const highlightedLines = this.theme.highlightCode(token.text, token.lang);
for (const hlLine of highlightedLines) {
lines.push(" " + hlLine);
}
} else {
const codeLines = token.text.split("\n");
for (const codeLine of codeLines) {
lines.push(" " + this.theme.codeBlock(codeLine));
}
}
lines.push(this.theme.codeBlockBorder("```"));
} else {