@inreasons/md-parser v0.0.5

@inreasons/md-parser

安装

  npm i @inreasons/md-parser

使用

vite

  import mdParser from '@inreasons/md-parser'

  export default defineConfig({
    plugins: [
      mdParser.vite({ /* options */ })
    ]
  })

rollup

vite本身是基于 rollup 所以理论上来讲是没问题的

  import mdParser from '@inreasons/md-parser'

  export default {
    plugins: [
      mdParser.rollup({ /* options */ })
    ]
  }

webpack

待测试

options

const options = {
  // 插件默认使用了 markdown-it-anchor 及 markdown-it-toc-right
  // 若想注册其他组件可传入一个数组来进行插件使用 [plugin, pluginOptions]
  // 最终效果: [[plugin, pluginOptions], [plugin, pluginOptions]]
  markdownItUses: [],
  // 可对 markdown-it 进行设置, 支持所有配置
  markdownItOptions: {},
  // 在进行转换之前可进行一些操作, 参数为设置配置后的 markdown-it 对象
  markdownItSetup: (markdown) => { },
  // 包裹代码块外层的自定义类名
  classes: 'markdown-parser',
  // 在模板转换之前/之后进行一些修改或者操作 需要有返回值
  transforms: {
    before: (code, id) => code,
    after: (code, id) => code
  }
}

功能

你可以在 markdown 里写 Vue 了, 是的 Vue 代码, 但仅限于 Vue3 (目前来说, 等功能支持以后再回来删掉这段(๑•̀ㅂ•́)و✧).

script style

至于说功能嘛....... 比如说直接写 \<script> 和 \<style> ?

TIPS:
插件会解析 script 标签, 它们可以有多个, 但 setup script 标签只能有一个!

这和 Vue 官方的想法是一致的, 因为 setup 作为入口, 一个函数也应该只有一个入口.

不带有 setup 属性的 script 标签内的代码会在程序一开始执行, 在这你不能操作 Vue 实例, 但是在 setup 的标签内是可以的. 并且你可以在 setup 标签内写 return 语句, 这和 setup 方法内 return 的行为是一致的, 你可以自由选择把什么变量抛出去供页面访问.

但是需要注意的是, 不管是哪种属性的标签 都不应该去写 export 语句代码, 它将被忽略, 不管是 export default 还是 export xxx, 这是有意而为.

<script setup>
import { ref, onMounted } from 'vue'
const string = ref('this is ref string')

setTimeout(() => {
  string.value = 'this changed ref string'
}, 1000)

onMounted(() => {
  document.body.style.background = '#999'
})

return {
  string
}
</script>

<script setup>
// 第二个及以后的 setup script 代码将被忽略
console.log('This is the second script setup')
</script>

<script>
  console.log('这里的代码将早于 setup 标签')
</script>

<style>
  /* 这里写的所有样式会和顶部 YAML 的样式合并放到头部渲染 */
  body {
    margin: 0;
    padding: 30px;
    border: 1px solid;
    box-sizing: border-box;
    color: #fff
  }
</style>

<style>
  /* 多个样式也没问题, 一样会合并并挂载 */
  h3 {
    color: #f00
  }
</style>

toc

你可以在页面的任意地方使用 [[toc]] 展示你 markdown 页面里的所有标题, 类似一个简单的目录. 详细用法可以参考 markdown-it-toc-right

YAML

这个也是支持的, 同时你还可以通过 link 来引入网络样式, 通过 style 来写一些简单的样式(记得别换行). 不过 title/style/link/meta 标签都是只能有一个的, 多写几个会解析报错. (感觉不太好使, 准备自己写一个)

---
title: 这里的值会被设置成页面的 title (document.title)
meta:
  - name: description
    content: Hello World
  - name: keyword
    content: vue
link:
  - src: //cdn.jsdelivr.net/npm/element-plus/dist/index.css
style: h1{color:#f0f;font-size:20px}
---

当然除了这四个属性以外, 你额外定义的属性在页面也是可以随处使用的, 没有任何前缀, 定义的名字是什么就怎么使用

---
date: 2021-09-05 00:52
string: this is yaml string
---

{{ date }}
<div>{{ string }}</div>

card

每一个 h3 开始直到下一个 h3 的代码都会被一个 section-card 类名的盒子给包裹, 这是为了方便设置样式风格, 你也可以修改为自己喜欢的样式风格

图片

这个功能还待完善, 解析的插件还没写好, 写好再回来补

代码块

这个功能还待完善, 解析的插件还没写好, 写好再回来补