[轮子] Markdown > Vue (webpack)

2017-10-27 10:05:11 +08:00
 wxsm

先放项目地址: https://github.com/wxsms/vue-md-loader

其实类似的 loader 已经有了。做这个是为了解决一个突出的问题:Vue 相关项目文档的代码示例。

比如说这样的一个 Markdown 文件: https://github.com/wxsms/uiv/blob/master/docs/pages/components/Alert.md

要变成为这样的一个文档页面:https://uiv.wxsm.space/alert/

要实现同样的示例代码不用写两份,最理想的方案应该是直接通过 loader 解决。于是就有了这个轮子。

工作原理是:它可以将 Markdown 中需要实例化的 CodeBlocks 通过一定规则打包成独立的 Vue 组件,最后再将整个 Markdown 打包为父组件,这样就可以直接交给 vue-loader 加载了。

除此以外它也具备了其它的常用功能,如代码高亮,插件加载等。

使用方法:

module.exports = {
  // ...
  module: {
    rules: [
      // ...
      {
        test: /\.md$/,
        loader: 'vue-loader!vue-md-loader'
      }
    ]
  }
}
2497 次点击
所在节点    分享创造
3 条回复
codermagefox
2017-10-27 11:33:06 +08:00
刚好需要,收了,感谢楼主.
不过我准备抄一个改改,楼主别介意啊(我看是 MIT 来着)
已 Star
viko16
2017-10-27 11:39:28 +08:00
赞,
源码展示部分再加个可折叠就好了
(跟楼上一样抱走魔改去了~
wxsm
2017-10-27 11:41:38 +08:00
@codermagefox @viko16 感谢支持,有需求可以提 :D

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/401125

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX