Markdown Viewer浏览器扩展完全指南
【免费下载链接】markdown-viewerMarkdown Viewer / Browser Extension项目地址: https://gitcode.com/gh_mirrors/ma/markdown-viewer
Markdown Viewer是一款功能强大的浏览器扩展工具,专门用于在浏览器中完美渲染和预览Markdown文档。无论您是需要查看本地Markdown文件还是在线文档,这个扩展都能提供专业级的阅读体验。
为什么选择这款Markdown渲染工具?
在日常工作中,我们经常遇到各种Markdown文档。传统的文本编辑器虽然能打开文件,但无法提供实时渲染效果。Markdown Viewer扩展完美解决了这个问题,让您能够像浏览网页一样查看格式化的Markdown内容。
核心优势亮点:
- 本地和远程文件双支持
- 30+精美主题随意切换
- 数学公式和图表功能集成
- 智能语法高亮技术支持
- 安全设计保障
- 自动检测Markdown内容类型
快速安装配置清单
获取扩展的多种途径
- 官方应用商店:在Chrome网上应用店搜索"Markdown Viewer"
- 源码仓库:从仓库克隆最新版本:https://gitcode.com/gh_mirrors/ma/markdown-viewer
- 开发者模式:加载已解压的扩展程序
权限设置关键步骤
访问浏览器扩展管理页面,找到Markdown Viewer并开启"允许访问文件网址"选项。
远程访问授权管理
在扩展选项中添加您需要访问的网站域名,支持通配符和子域名批量配置。
功能特色深度解析
主题系统完全指南
Markdown Viewer提供多种显示模式,所有主题都支持以下宽度选项:
| 宽度模式 | 适用场景 | 特点说明 |
|---|---|---|
| auto | 移动设备 | 智能适应屏幕尺寸 |
| full | 桌面浏览 | 全屏宽度显示效果 |
| wide | 专业文档 | 1400px固定宽度 |
| large | 日常使用 | 1200px舒适阅读 |
| medium | 中等屏幕 | 992px固定宽度 |
| small | 小屏幕 | 768px固定宽度 |
| tiny | 极小屏幕 | 576px固定宽度 |
自定义主题上传流程
- 在高级选项中选择"CUSTOM"内容主题
- 上传您设计的CSS样式文件
- 配置个性化色彩方案偏好
编译器选项配置
Markdown Viewer支持多种Markdown编译器,包括完整的CommonMark支持和GFM表格、删除线等扩展功能。
主要编译器选项包括:
- html- 启用HTML标签(默认开启)
- linkify- 自动将URL文本转换为链接(默认开启)
- breaks- 将段落中的换行符转换为换行标签
- footnote- 脚注支持
- tasklists- 任务列表支持
内容选项详解
语法高亮:支持100+编程语言的语法高亮,基于Prism.js的高亮引擎,提供清晰易读的代码显示效果。
自动重载:当启用时,扩展将对托管在以下位置的Markdown文件每秒进行一次GET请求:
file:///URLs- 任何解析为localhost IPv4
127.0.0.1或 IPv6::1的主机
表情符号:将表情符号短名称转换为EmojiOne图像:
- 表情符号短名称如
:smile:将使用EmojiOne图像转换为笑脸。
数学公式渲染能力
支持以下MathJax分隔符:
- 行内数学:
\(math\)和$math$ - 显示数学:
\[math\]和$$math$$
启用MathJax时,以下规则适用于您的Markdown内容:
- 不是数学公式一部分的文本中的常规美元符号
$应该被转义:\$ - 不支持括号的常规Markdown转义:
\(和\),以及方括号:\[和\]。MathJax将把这些分隔符之间的任何内容转换为数学公式,除非它们被反引号包裹:`\(`或代码块。
图表创建与展示
使用mmd或mermaid代码块轻松创建各类图表:
```mmd sequenceDiagram ```或者,图表可以用HTML标签包裹:
<pre><code class="mermaid"> sequenceDiagram </code></pre>- 通过拖动代码块的右下角向上或向下垂直调整图表容器的大小
- 通过按住Shift键然后使用鼠标滚轮放大和缩小
- 通过按住鼠标左键并在任何方向拖动来平移
目录生成功能
根据在Markdown文档中找到的标题生成目录。
权限管理详细说明
启用文件访问
要启用对文件URL的访问,请按照以下步骤操作:
- 导航到
chrome://extensions - 找到Markdown Viewer扩展并点击
Details按钮 - 确保
Allow access to file URLs开关已打开
启用站点访问
可以通过将URL地址复制/粘贴到站点访问文本框中,然后单击其旁边的Add按钮来启用对各个站点的访问。
通配符使用示例:
- 使用通配符
*://raw.githubusercontent.com启用对http和https协议的访问 - 使用通配符
https://*.githubusercontent.com启用对给定主机名的所有子域的访问 - 通过添加
http://localhost启用对localhost上所有端口的访问 - 通过添加
http://localhost:3000启用对特定端口的访问
内容检测机制
每个启用的来源都有一个内容类型头检测和路径匹配正则表达式的选项:
头检测:启用此选项时,扩展将检查是否存在值为text/markdown、text/x-markdown或text/plain的content-type头。
路径匹配:启用此选项时,扩展将检查页面URL是否与路径匹配正则表达式匹配。
默认正则表达式是:\.(?:markdown|mdown|mkdn|md|mkd|mdwn|mdtxt|mdtext|text)(?:#.*|\?.*)?$
这是一个简单的正则表达式,匹配以下结尾的URL:
- Markdown文件扩展名:
\.(?:markdown|mdown|mkdn|md|mkd|mdwn|mdtxt|mdtext|text) - 以及可选的哈希或查询字符串:
(?:#.*|\?.*)?
路径匹配优先级
启用的来源从最具体到最不具体进行匹配:
https://raw.githubusercontent.comhttps://*.githubusercontent.com*://raw.githubusercontent.com*://*.githubusercontent.com*://*
将选择具有最高优先级的匹配来源,并使用其头检测和路径匹配设置来确定是否应渲染内容。
实际应用场景推荐
技术文档编写优化
实时预览功能让API文档编写更加高效直观,可以及时调整格式和内容。
项目文档快速浏览
无需下载即可完整查看GitHub项目的README文件,获得与在GitHub上相同的阅读体验。
学习笔记整理提升
将学习过程中的笔记以Markdown格式保存,通过扩展获得更好的阅读体验。
常见问题解决方案
本地文件无法查看
确保在扩展管理页面开启了文件访问权限。如果扩展图标旁显示"允许访问"按钮,点击完成授权。
数学公式显示异常
检查公式语法是否正确,普通美元符号需要使用转义字符\$。
主题切换失效
清除浏览器缓存并重新加载页面,或检查自定义主题文件是否符合CSS规范。
官方文档参考:options/index.html
核心功能源码:background/
【免费下载链接】markdown-viewerMarkdown Viewer / Browser Extension项目地址: https://gitcode.com/gh_mirrors/ma/markdown-viewer
创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考