V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
wxsm
V2EX  ›  分享创造

[轮子] Markdown > Vue (webpack)

  •  
  •   wxsm ·
    wxsms · 2017-10-27 10:05:11 +08:00 · 2498 次点击
    这是一个创建于 2584 天前的主题,其中的信息可能已经有所发展或是发生改变。

    先放项目地址: 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'
          }
        ]
      }
    }
    
    3 条回复    2017-10-27 11:41:38 +08:00
    codermagefox
        1
    codermagefox  
       2017-10-27 11:33:06 +08:00
    刚好需要,收了,感谢楼主.
    不过我准备抄一个改改,楼主别介意啊(我看是 MIT 来着)
    已 Star
    viko16
        2
    viko16  
       2017-10-27 11:39:28 +08:00
    赞,
    源码展示部分再加个可折叠就好了
    (跟楼上一样抱走魔改去了~
    wxsm
        3
    wxsm  
    OP
       2017-10-27 11:41:38 +08:00
    @codermagefox @viko16 感谢支持,有需求可以提 :D
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1060 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 19:23 · PVG 03:23 · LAX 11:23 · JFK 14:23
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.