Markdown Viewer 浏览器插件实战本地 .md 文件怎么渲染成网页照着这条链路走就行【免费下载链接】markdown-viewerMarkdown Viewer / Browser Extension项目地址: https://gitcode.com/gh_mirrors/ma/markdown-viewerMarkdown Viewer 是一款开源的浏览器扩展专门接管浏览器里的 .md 文件本地磁盘上的文档、远端服务器返回的 Markdown 文本打开即是渲染好的网页语法高亮、数学公式、流程图开箱可用。它支持的解析器、主题和内容选项都可以逐项配置从「能看」到「好看」再到「按你的方式看」一条链路走下来并不复杂。下面就把这条链路完整过一遍每到一个节点都给出可以直接照做的做法。先花 5 分钟完成环境准备拿到插件源码从应用商店安装自然最省事Chrome、Firefox、Edge 等主流浏览器都有收录想先看代码再决定或者需要离线安装就从仓库克隆一份git clone https://gitcode.com/gh_mirrors/ma/markdown-viewer克隆完成后打开chrome://extensions把右上角的「开发者模式」打开点击「加载已解压的扩展程序」选中仓库目录即可。如果之前下载过 release 里的 zip 包解压后走同样的加载流程。手动安装的代价是不会自动更新这一点心里有数就好。别忘了给本地文件放行加载完成后先别急着关页面。在扩展列表里找到 Markdown Viewer点「详细信息」确认「允许访问文件网址」是打开状态。这一步决定它能不能读取file:///开头的本地路径很多「装上却没反应」的情况都出在这里。Firefox 用户注意Linux 上 Firefox 默认把 .md 按text/markdown处理会弹出下载框。解决方式是让系统以text/plain提供 .md官方文档里给出了~/.mime.types和 shared-mime-info 两种配置方法按你的发行版选一种即可。打开第一个 .md 文件确认渲染真的生效从支持的扩展名开始.md之外.markdown、.mdown、.mkdn、.mkd、.mdwn、.mdtxt、.mdtext、.text同样在识别范围内。随便拖一个 Markdown 文档进浏览器正常情况下你会立刻看到渲染后的页面而不是一串源码。一眼分辨「渲染中」和「源码」工具栏的插件图标点开后有一个Markdown / Html切换按钮。点一下它就在原始源码和渲染结果之间切换适合排查「文档没渲染」到底是解析问题还是文件本身的问题。旁边还有一个Defaults按钮把所有设置一键恢复成出厂值调乱了用它兜底。如果打开本地文件时页面提示没有访问权限回到插件的 Advanced Options 页面文件访问区块会出现一个 Allow Access 按钮点击后会跳到浏览器内置的扩展管理页把「允许访问文件网址」打开即可。另外一个不显眼但很实用的小细节插件会记住你的滚动位置下次打开同一份文档直接回到上次读到的地方长文档续读很舒服。外观与解析器三个高频设置项一次调到位选一个顺眼的主题 插件内置 30 多个主题从 GitHub 风格到极简风都有。github和github-dark这两个主题在auto宽度下会带一圈边框渲染效果和 GitHub 仓库里的 README 几乎一致写开源项目文档时用它预览最贴切。暗色场景里sakura-vader、water-dark也各有味道可以像试衣服一样挨个切换几秒钟就能定下来。内容宽度按文档类型定宽度效果适合auto随屏幕自适应大多数日常阅读full占满整个窗口宽屏大图、表格密集的文档wide固定 1400px技术文档、API 说明large/medium1200px / 992px常规文章small/tiny768px / 576px模拟手机宽度解析器按用途挑扩展内置了多个 Markdown 解析器在弹窗的 Compiler 页签里切换markdown-it插件体系最丰富GFM 表格、删除线等扩展语法支持得最全作为默认推荐marked体积小、速度快简单文档随手一开就很跟手remark走 AST 路线适合对文档结构有处理需求的场景切换解析器后同一份文档的渲染细节会有差异这是正常的。更细的行为由下面的 Compiler Options 控制其中html允许源码里的 HTML 标签和linkify自动把 URL 文本转成链接默认开启其余像 tasklists- [x]任务列表、footnote脚注、sub/sup上下标这类开关按文档需要逐个打开就行。进阶能力公式、图表、目录、自动刷新一次点亮在弹窗的 Content 页签里六个开关决定了文档能「活」到什么程度开关默认作用syntax开围栏代码块语法高亮mathjax关LaTeX 数学公式mermaid关流程图、时序图等图表toc关按标题自动生成目录emoji关:smile:短码转表情图片autoreload关文件变化后自动刷新图表一段围栏代码的事 开启mermaid后用mmd或mermaid标注的代码块会被渲染成图表graph TD A[写文档] -- B[开启 mermaid] B -- C{渲染成功?} C --|是| D[截图发群里] C --|否| E[检查围栏语言]渲染出的图表还支持交互拖右下角调整容器高度按住 Shift 滚动滚轮缩放按住左键拖动平移。流程图、时序图、类图都按 Mermaid 的语法写就行。公式注意美元符号的转义规则开启mathjax后行内公式用\(...\)或$...$显示公式用\[...\]或$$...$$。有一条规则容易踩坑正文里普通的美元符号要写成\$否则会被当成公式定界符吞掉反过来被反引号包起来的\(不会触发公式转换需要展示字面量时可以借用这一点。自动刷新写作时的隐形助手autoreload开启后扩展会对file:///路径和解析到本机回环地址127.0.0.1/::1的站点每秒发一次请求文件一保存页面就更新。本地起服务调试 Markdown 时配合它可以做到「改完就看效果」完全不用手动刷新。远程站点把可访问清单交给插件管理出于安全考虑扩展默认不访问任何站点内容所有远端权限都需要你显式授予。点插件图标进入 Advanced Options在 Site Access 里把要放行的网址粘贴进去即可。几个常用的通配写法https://*.githubusercontent.com # 某域名下的所有子域 *://raw.githubusercontent.com # 同时覆盖 http 和 https http://localhost # 本地开发服务器所有端口 *://* # 所有站点尽量别用每个已授权站点还可以单独配置两条识别规则Header Detection检查响应头content-type是否为text/markdown、text/x-markdown或text/plainPath Matching则用正则匹配 URL 路径默认正则是\.(?:markdown|mdown|mkdn|md|mkd|mdwn|mdtxt|mdtext|text)(?:#.*|\?.*)?$即匹配以 Markdown 扩展名结尾的地址。多个规则并存时按「最具体优先」匹配精确域名优先于通配域名。如果登录了浏览器并开启了同步主题、解析器这些偏好会跟着账号走跨设备保持一致。授权列表也会同步但真正授予的权限不会——所以换设备后偶尔会看到某个 origin 高亮显示点一下旁边的Refresh重新授权即可。给新手的第一个动作先从最小闭环开始把仓库克隆到本地按上面的流程加载并开启文件访问权限然后打开一份你手头最常用的 .md 文档确认渲染、主题和宽度符合预期。这套基础跑通后再逐个打开 Content 页签里的开关每开一个就刷新一次文档你会很清楚每个功能带来了什么。等用熟了还有两处可以深挖。一是自定义主题在 Advanced Options 的 Settings 里把 Content Theme 设为CUSTOM并上传你的 CSS上限 8KB会自动压缩平时调样式时也可以在文档头部加一行link直接引用本地主题文件开发效率高不少。二是想改渲染逻辑的话background/compilers/目录下的解析器封装就是入口改完用sh build/package.sh chrome或firefox重新打包。从「能看」到「按自己的方式看」Markdown Viewer 留的口子比想象中多剩下就交给你的使用习惯了。【免费下载链接】markdown-viewerMarkdown Viewer / Browser Extension项目地址: https://gitcode.com/gh_mirrors/ma/markdown-viewer创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考