Skip to content

ycrao/markdoc-viewer

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

29 Commits
 
 
 
 
 
 
 
 

Repository files navigation

MarkdocViewer

MarkdocViewer : reading markdown documentation from open git repository (just in one page) !

MarkdocViewer :从公开的 git 仓库阅读 markdown 文档 (就一个页面)!

新功能特性

v1.0.0

  • 阅读器相关配置存储到 sessionStorage 里,以支持多浏览器标签阅读不同文档
  • MarkdocViewer 现已支持暗黑模式!点击页面右上角的 🌙/☀️ 按钮即可切换,自动检测系统偏好设置,用户偏好会被保存,下次访问时自动应用
  • 修正 Markdown 文档渲染之后的图片链接地址,避免 404 不可见

v1.0.1

  • marked.js 升级至 16.3.0 版本
  • highlight.js 依赖升级至 11.11.1 版本,并引入 marked-highlight 插件
  • github-markdown-css 由本地 CSS 文件升级至 5.8.1 CDN 版本
  • 提升用户体验,增加内容加载指示器,优雅的错误处理和提示
  • 重构核心 MarkdownViewer 组件

v1.0.2

  • 解决无法渲染 markdown 表格问题

v1.0.3

  • 增强网页资源安全,加上外部资源 integrity 属性值

参数配置

MarkdocViewer 默认配置如下:

// default options
{
    // git repo raw file base_url, default to github
    'base_url': 'https://raw.githubusercontent.com/',
    // document directory, default empty
    'base_dir': '',
    // git repo name, default 'yascmf/docs'
    'repo_name': 'ycrao/mynotes',
    // git branch name, default 'master'
    'branch_name': 'master',
    // index file name, using it to generate sider -nav menu
    'index_file': 'index.md',
    // home file name, default 'README.md'
    'home_file': 'intro.md',
    // element id for left-sider or right-sider menu in HTML
    'sider_id': 'sider-menu',
    // element id for main content in HTML
    'content_id': 'content',
}

以上某些配置,可以通过传入查询串,予以重载新配置:

https://raoyc.com/markdoc-viewer?doc=intro.md&dir=&index=index.md&repo=ycrao/mynotes&home=intro.md&branch=master

其中,dir 查询串对应 base_dirrepo 对应 repo_name 配置,后面依次类推。请保证,查询串值与仓库文档实际结构目录一致。

const dir = config("dir", ""),
    repo = config("repo", "ycrao/mynotes"),
    branch = config("branch", "master"),
    index = config("index", "index.md"),
    home = config("home", "intro.md");
const options = {
    base_url: "https://raw.githubusercontent.com/",
    base_dir: dir,
    repo_name: repo,
    branch_name: branch,
    index_file: index,
    home_file: home,
    sider_id: "sider-menu",
    content_id: "content",
};
console.log(config);
var mv = new MarkdocViewer(options);
mv.viewer();

在线文档阅读示例

鸣谢

本源码使用到以下开源组件:

About

MarkdocViewer : reading markdown documentation from open git repository (just in one page) !

Topics

Resources

Stars

Watchers

Forks

Packages

 
 
 

Contributors