{"id":22472370,"url":"https://github.com/hojas/rich-markdown","last_synced_at":"2026-04-15T20:02:50.804Z","repository":{"id":208798368,"uuid":"722513506","full_name":"hojas/rich-markdown","owner":"hojas","description":"🇲 功能丰富的 markdown 解析工具。","archived":false,"fork":false,"pushed_at":"2023-12-23T12:11:58.000Z","size":94,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-07-29T16:37:53.314Z","etag":null,"topics":["markdown","remark"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hojas.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-11-23T10:07:28.000Z","updated_at":"2024-01-21T06:57:54.000Z","dependencies_parsed_at":"2023-11-23T11:26:43.148Z","dependency_job_id":"735f5beb-9570-40ba-8c5b-2b7633cd2426","html_url":"https://github.com/hojas/rich-markdown","commit_stats":null,"previous_names":["hojas/rich-markdown"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/hojas/rich-markdown","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hojas%2Frich-markdown","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hojas%2Frich-markdown/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hojas%2Frich-markdown/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hojas%2Frich-markdown/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hojas","download_url":"https://codeload.github.com/hojas/rich-markdown/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hojas%2Frich-markdown/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31857625,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-15T15:24:51.572Z","status":"ssl_error","status_checked_at":"2026-04-15T15:24:39.138Z","response_time":63,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["markdown","remark"],"created_at":"2024-12-06T12:14:40.068Z","updated_at":"2026-04-15T20:02:50.764Z","avatar_url":"https://github.com/hojas.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# rich-markdown\n\n功能丰富的 markdown 解析工具。\n\n## 特色功能\n\n- 元信息解析\n- 代码高亮\n- 视频播放\n- 数学公式\n- mermaid 流程图\n\n## 在 Vue 3 中使用\n\n创建 MarkdownViewer.vue 组件：\n\n```html\n\n\u003cscript setup lang=\"ts\"\u003e\n  import { ref, watchEffect, onBeforeUnmount, onMounted } from 'vue'\n  import { parseMarkdown, initCodeClipboard } from 'rich-markdown'\n  \n  // 根据环境自动切换暗黑模式和亮白模式\n  import 'rich-markdown/dist/theme/default.css'\n  \n  // 暗黑模式\n  // import 'rich-markdown/dist/theme/dark.css'\n  \n  // 亮白模式\n  // import 'rich-markdown/dist/theme/light.css'\n\n  const props = defineProps\u003c{ content: string }\u003e()\n\n  const html = ref('')\n  const codeClipboard = ref()\n\n  watchEffect(async () =\u003e {\n    const res = await parseMarkdown(props.content)\n    html.value = res.html\n  })\n\n  onMounted(() =\u003e {\n    // 初始化复制代码按钮\n    codeClipboard.value = initCodeClipboard()\n  })\n\n  // 销毁复制代码 clipboard 对象\n  onBeforeUnmount(() =\u003e codeClipboard.value?.destroy())\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cdiv class=\"markdown-body\" v-html=\"html\"\u003e\u003c/div\u003e\n\u003c/template\u003e\n\n\u003cstyle scoped\u003e\n  .markdown-body {\n    padding: 30px;\n  }\n\u003c/style\u003e\n```\n\n使用组件：\n\n```html\n\u003cscript setup lang=\"ts\"\u003e\nimport { ref } from 'vue'\nimport MarkdownViewer from './components/MarkdownViewer.vue'\n\nconst content = ref('# hello')\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cMarkdownViewer :content=\"content\" /\u003e\n\u003c/template\u003e\n```\n\n## API\n\n### parseMarkdown(value[, options])\n\n转化 markdown 字符串为 html 字符串。\n\n#### 参数\n\n**value**: markdown 字符串\n\n**options**: 配置项\n\n- remarkPlugins: remark 插件列表， 默认值为 `[]`\n- rehypePlugins: rehype 插件列表， 默认值为 `[]`\n\n#### 返回值\n\n返回一个 Promise 对象，包含以下属性：\n\n- data: markdown 中的 matter 数据\n- html: 转化后的 html 字符串\n\n### initCodeClipboard()\n\n初始化代码块复制按钮。\n\n#### 返回值\n\n返回 ClipboardJS 对象。Vue 中使用需在组件销毁前调用 destroy 方法：\n\n```html\n\u003cscript setup lang=\"ts\"\u003e\n  import { onMounted, onBeforeUnmount } from 'vue'\n  import { initCodeClipboard } from 'rich-markdown'\n\n  const clipboard = ref()\n  \n  onMounted(() =\u003e {\n    clipboard.value = initCodeClipboard()\n  })\n\n  onBeforeUnmount(() =\u003e {\n    clipboard.value?.destroy()\n  })\n\u003c/script\u003e\n```\n\n## 功能示例\n\n### 1. 解析文档元信息\n\n```text\n---\nversion: 1.0\n---\n\n# Hello\n\n```\n\nparseMarkdown 解析后得到结果为：\n\n```javascript\n{\n    data: { matter: { version: 1 } },\n    html: '\u003ch1\u003eHello\u003c/h1\u003e',\n}\n```\n\n### 2. 代码块高亮\n\n\u003e 使用 highlight.js 高亮代码。\n\n``` python\n@requires_authorization\ndef somefunc(param1='', param2=0):\n    '''A docstring'''\n    if param1 \u003e param2: # interesting\n        print 'Greater'\n    return (param2 - param1 + 1) or None\nclass SomeClass:\n    pass\n\u003e\u003e\u003e message = '''interpreter\n... prompt'''\n```\n\n## 3. 视频\n\n\u003e 使用 video.js 播放视频。\n\n用法：\n\n````text\n```video\nhttps://download.samplelib.com/mp4/sample-30s.mp4\n```\n````\n\n效果如下：\n\n```video\nhttps://download.samplelib.com/mp4/sample-30s.mp4\n```\n\n### 4. 数学公式\n\n\u003e 使用 Katex 解析公式。\n\n用法：\n\n```text\n可以创建行内公式，例如 $\\Gamma(n) = (n-1)!\\quad\\forall n\\in\\mathbb N$。或者块级公式：\n\n$$\nx = \\dfrac{-b \\pm \\sqrt{b^2 - 4ac}}{2a}\n$$\n```\n\n效果如下：\n\n可以创建行内公式，例如 $\\Gamma(n) = (n-1)!\\quad\\forall n\\in\\mathbb N$。或者块级公式：\n\n$$\nx = \\dfrac{-b \\pm \\sqrt{b^2 - 4ac}}{2a}\n$$\n\n### 5. mermaid\n\n使用 mermaid 渲染流程图：\n\n````text\n```mermaid\ngraph TD;\n    A--\u003eB;\n    A--\u003eC;\n    B--\u003eD;\n    C--\u003eD;\n```\n````\n\n效果如下：\n\n```mermaid\ngraph TD;\n    A--\u003eB;\n    A--\u003eC;\n    B--\u003eD;\n    C--\u003eD;\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhojas%2Frich-markdown","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhojas%2Frich-markdown","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhojas%2Frich-markdown/lists"}