import { Marked, type MarkedExtension } from 'marked';
import {createDirectives, presetDirectiveConfigs} from 'marked-directive';
import yaml from 'js-yaml';
import markedAlert from "marked-alert";
import markedMermaid from "./mermaid";
import markedTable from "./table";
import {gfmHeadingId} from "marked-gfm-heading-id";
import markedColumns from "./columns";
let globalIconPrefix: string | undefined = undefined;
function overrideIconPrefix(path?: string){
globalIconPrefix = path;
return {
[Symbol.dispose](){
globalIconPrefix = undefined;
}
}
}
// 使用 marked-directive 来支持指令语法
const marked = new Marked()
.use(gfmHeadingId())
.use(markedAlert())
.use(markedMermaid())
.use(markedTable())
.use(createDirectives([
...presetDirectiveConfigs,
{
marker: '::::',
level: 'container'
},
{
marker: ':::::',
level: 'container'
},
{
level: 'inline',
marker: ':',
// :[icon] 或 :[icon.ext] 语法
// 支持的扩展名: .svg, .png, .gif, .jpg, .jpeg, .webp
// 如果不指定扩展名,默认为 .png
renderer(token) {
if (!token.meta.name) {
const iconText = token.text || '';
// 已知支持的图片扩展名
const supportedExtensions = ['svg', 'png', 'gif', 'jpg', 'jpeg', 'webp'];
// 检查是否包含扩展名(查找最后一个点)
let iconName = iconText;
let extension = 'png'; // 默认扩展名
const lastDotIndex = iconName.lastIndexOf('.');
if (lastDotIndex > 0) {
const potentialExt = iconName.slice(lastDotIndex + 1).toLowerCase();
if (supportedExtensions.includes(potentialExt)) {
extension = potentialExt;
iconName = iconName.slice(0, lastDotIndex);
}
}
const style = globalIconPrefix ? `style="--icon-src: url('${globalIconPrefix}/${iconName}.${extension}')"` : '';
return ``;
}
return false;
}
},
]), {
extensions: [
...markedColumns(),
{
// 自定义代码块渲染器,支持 yaml/tag 格式
name: 'code-block-yaml-tag',
level: 'block',
start(src: string) {
// 检测 ```yaml/tag 开头的代码块
return src.match(/^```yaml\/tag\s*\n/m)?.index;
},
tokenizer(src: string) {
const rule = /^```yaml\/tag\s*\n([\s\S]*?)\n```/;
const match = rule.exec(src);
if (match) {
const yamlContent = match[1]?.trim() || '';
let props: Record = {};
try {
props = (yaml.load(yamlContent) as Record) || {};
} catch (e) {
console.error("YAML Parse Error in code-block-yaml-tag:", e);
props = { error: "Invalid YAML content" };
}
// 提取 tag 名称,默认为 tag-unknown
const tagName = (props.tag as string) || 'tag-unknown';
// 移除 tag 属性,剩下的作为 HTML 属性
const { tag, ...rest } = props;
// 提取 innerText 内容(如果有 body 字段)
let content = '';
if ('body' in rest) {
content = String(rest.body || '');
delete (rest as Record).body;
}
// 构建属性字符串
const propsStr = Object.entries(rest)
.map(([key, value]) => {
const strValue = String(value);
// 如果值包含空格或特殊字符,添加引号
if (strValue.includes(' ') || strValue.includes('"')) {
return `${key}="${strValue.replace(/"/g, '"')}"`;
}
return `${key}="${strValue}"`;
})
.join(' ');
return {
type: 'code-block-yaml-tag',
raw: match[0],
tagName,
props: propsStr,
content
};
}
},
renderer(token: any) {
// 渲染为自定义 HTML 标签
const propsAttr = token.props ? ` ${token.props}` : '';
return `<${token.tagName}${propsAttr}>${token.content || ''}${token.tagName}>\n`;
}
}]
});
export function parseMarkdown(content: string, iconPrefix?: string): string {
using prefix = overrideIconPrefix(iconPrefix);
return marked.parse(content.trimStart()) as string;
}
export { marked };