markdown高亮显示html语言,将markdown文件转成HTML并支持代码高亮

Render Markdown JavaScript

Renders markdown files to HTML with highlighted code blocks BUT ALSO RENDERS THE JAVASCRIPT ONES.

625332134c6f4d4600884b99daebf603.png

Why?

I've got a bunch of little JavaScript UI libs that don't need much more than a README.md for documentation, but a demo is worth a thousand README.md's, so I'd like the code in the README.md to actually render in a browser. Also great so people can copy/paste from the docs and know that it runs.

How?

Write normal markdown but for code fence blocks you want to have render in the browser also, use the "render" or "render-babel" language. Github markdown hates code fenced blocks inside of code fenced blocks, so I don't have an example here, look at the demo.md

How do I get JavaScript and CSS onto the page?

With

#Then markdown as usual...

You can place your scripts at the bottom of the markdown file to prevent blocking your content from rendering, all scripts are run after DOMContentLoaded.

Also check out the demo.md file from the screenshot.

Does it babel?

Yes, first include babel standalone at the top of your markdown file and then use the render-babel language instead of render. Again, github hates code fence blocks inside code fence blocks here so I can't really show you in this README. Check out the demo

How Do I Attach Stuff to the DOM?

There will be a variable called DOM_NODE available to use, its the node for just that script.

CLI Usage

npm install render-markdown-js

render-markdown-js ./some-file.md > output.html

Node API Usage

const rmj = require('render-markdown-js')

const html = rmj('#string of markdown')

Options

There are none. Copy, paste, tweak.

Enjoy!

Please enjoy!

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值