ARTICLE DETAIL

资讯详情

深耕网站建设与运营推广的一线实战洞察。

markdown-viewer 使用指南:从安装到进阶的完整配置

markdown-viewer 使用指南:从安装到进阶的完整配置 markdown-viewer 使用指南从安装到进阶的完整配置【免费下载链接】markdown-viewerMarkdown Viewer / Browser Extension项目地址: https://gitcode.com/gh_mirrors/ma/markdown-viewermarkdown-viewer 是一款开源浏览器扩展将 Markdown 文件直接渲染为排版完整的网页覆盖本地与远程文档的 Markdown 浏览器预览。全文按三级进阶给出完整配置步骤。能力速览渲染本地file:///与远程地址中的 Markdown 文件内置 5 款解析器markdown-it、marked、remark、commonmark、showdown可随时切换提供 30 主题含 GitHub / GitHub 暗黑支持上传自订主题支持 MathJax 公式、Mermaid 图表、Prism 代码高亮、自动目录、emoji 短码转换文件变动自动重载记住滚动位置原始视图与渲染视图可切换默认不给任何站点权限远程访问必须显式加入白名单第一关五分钟跑起来项目开源克隆源码即可使用git clone https://gitcode.com/gh_mirrors/ma/markdown-viewer按浏览器类型加载Chrome 系Edge、Brave、Chromium 等进入chrome://extensions→ 开启开发者模式 → 点击加载已解压的扩展程序 → 选中克隆目录Firefox进入附加组件管理器 → 选择从文件安装附加组件 → 定位到项目目录确认安装打开文件访问权限装完还差一个关键开关在扩展详情页打开允许访问文件网址。不开这一项本地文件一律打不开。之后双击电脑里任意.md文件地址栏出现file:///时页面即自动渲染第一份排版好的结果就在眼前。提醒一句手动安装不会自动收到更新想升级版本需要重新克隆加载。第二关把排版调到舒服 主题决定页面好不好看。扩展内置 30 套主题选择github或github-dark并把宽度设为auto时页面会带上一圈边框效果与 GitHub 仓库首页渲染 README 几乎一致。有自己的设计时也可上传自订主题上传后自动压缩大小上限 8KB。宽度是七档内置档位不用写一行 CSS取值实际宽度适合什么auto随屏幕自适应日常默认选择full100% 屏宽大屏展示、对比排版wide1400px长文档密集阅读large1200px常规技术文档medium992px带侧边栏的阅读small768px平板比例窗口tiny576px窄窗口快速扫读再打开三个开关长文档读起来更省力打开 ToC文档标题自动生成导航目录跳转不再靠手滚Prism 代码高亮默认开启围栏代码块按语法上色覆盖 200 多种语言打开自动重载每秒轮询一次file:///与 localhost 页面在文件变动后自动刷新第三关公式、图表与高亮 MathJax先在内容选项里打开mathjax开关。行内公式用\( \)或$...$独立公式用\[ \]或$$...$$。一条铁律正文里的普通美元符号必须写成\$否则会被当成公式边界被反引号包裹的内容不受影响。Mermaid 图表开启mermaid后把图表写进mmd或mermaid围栏代码块graph LR A[提交代码] -- B[跑测试] B -- C{全部通过?} C --|是| D[合并分支] C --|否| B渲染后支持三种交互拖动代码块右下角上下调整容器高度按住 Shift 再滚鼠标轮缩放图表按住鼠标左键拖动平移视图远程站点接入白名单与通配符扩展默认零权限所有远程站点都要手动放行。点击工具栏图标 → 高级选项 → 在 Site Access 输入框粘贴网址并添加。站点白名单通配符写法三个常用通配写法*://raw.githubusercontent.com同时覆盖 http 与 https 的同域名https://*.githubusercontent.com放开某域名下全部子域http://localhost本地开发全端口加:3000则限定单个端口每个白名单站点还能做二次识别按响应头匹配text/markdown、text/x-markdown、text/plain或按 URL 路径正则。默认正则覆盖.md、.markdown等常见后缀带#锚点或?查询串的地址也能命中。白名单会随浏览器账号同步但新设备仍需手动确认被高亮的站点点一下 Refresh 即可恢复访问。解析器怎么选同一份文档在不同解析器下细节渲染可能有差异。原则很简单文档越简单越选轻量的越复杂越选功能全的。名称特点什么时候选它markdown-it插件生态丰富GFM 覆盖全需要脚注、任务列表等扩展语法的文档marked体积小、速度快短文档在意渲染速度remark基于 AST扩展点灵活需要二次加工文档结构commonmark严格遵循 CommonMark 规范看重标准合规的正式文档showdown输出 HTML 易于集成把结果嵌入其他页面GFM 表格与删除线属于基础能力多数解析器默认支持脚注、上下标这类扩展语法要在编译器选项里逐项打开。出问题先查这张表表现原因处理方法公式不渲染MathJax 未启用或$未转义检查开关正文美元符号改为\$主题不生效浏览器缓存或主题文件异常硬刷新、重载扩展或切回默认主题再试远程站点白屏站点未加入白名单或授权失效高级选项补通配符高亮站点点 Refresh本地文件打不开允许访问文件网址没打开去扩展详情页打开该开关团队协作与安全习惯把下面这份 JSON 作为团队模板每人打开同一份文档看到的排版一致{ compiler: markdown-it, theme: github-dark, width: wide, mathjax: true, mermaid: true, syntax: true, toc: true }安全方面记住三件事只给真正需要的站点开权限别点允许全部阅读来路不明的文档时关掉html标签选项避免任意 HTML 被执行定期重新克隆新版替换本地安装让安全修复及时跟上到这里本地与远程文档、排版与内容功能、权限与协作模板都已就位。此后每次打开 Markdown 文件排版好的页面直接在眼前这套配置可以长期安静地待在那里。【免费下载链接】markdown-viewerMarkdown Viewer / Browser Extension项目地址: https://gitcode.com/gh_mirrors/ma/markdown-viewer创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表