Skip to content

a tool to help you view live demos created by markdown

License

Notifications You must be signed in to change notification settings

lessfish/codedog

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

23 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

codedog

初衷

个人比较习惯用 markdown 记一些东西,有时候需要插入一些在线小 demo,最好还能在线编辑,用类似 codepen 引入的话显得有些大材小用,而且第三方不保险,便希望有一种方式,能在 markdown 中写 html,并且不会相互干扰,遂有此项目

我们可以比较下原始的 markdown 文件和用 codedog 二次生成后的文件:

另外,这个项目是我为 css-secrets 特意创造的,更多应用可以点 这里 查看

用法

该项目使用非常简单,支持模块引用和全局引用,个人推荐全局引用方式

本地安装

$ git clone [email protected]:hanzichi/codedog.git
$ npm install
$ npm link

npm 安装

$ npm install codedog -g

应用

$ codedog xx.md
$ codedog xx.md width height

没错,codedog 几乎不提供任何参数,唯二提供的两个可选参数是在线 demo 的宽度和高度:

  • width the width of the code editor as well as other code blocks, default value is 100% of its parent node's width (0 is the same as default)
  • height the height of the code editor, default value is 270px

开发

$ npm install
$ npm run dev

run dev 后会自动打开浏览器,打开的 url 后跟上 example.html 即可

接下去在 libexample 两个文件夹中修改文件,codedog 会自动编译 example.md 文件,生成新的 example.html 文件并且自动刷新打开的页面

注意事项

  • 该项目用于从 markdown 生成 html,并提供某些在线编辑/预览,如果没有这个需求,说明你不需要
  • markdown 中标注为 html 的代码块会被 codedog 解析,并生成在线 demo,其余代码块不会解析
  • 被解析的代码块,支持内联 css 和 js,支持绝对路径的外链 css 和 js
  • 点击新页面打开,会在新的页面打开在线 demo
  • 页面 title 默认为第一次出现的一级标题,且 markdown 文件中一级标题只允许出现一次,且默认一级标题肯定早于其他二级标题、三级标题等出现
  • 不支持移动端,个人觉得移动端上编辑代码&预览效果不方便,故不提供支持

lisence

MIT

About

a tool to help you view live demos created by markdown

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published