mdcodify v0.0.4

mdcodify

安装

  npm i mdcodify

使用

Vite

  import mdcodify from 'mdcodify'

  export default defineConfig({
    plugins: [
      mdcodify({ /* options */ })
    ]
  })

Rollup

  import mdcodify from 'mdcodify'

  export default {
    plugins: [
      mdcodify({ /* options */ })
    ]
  }

options

const options = {
  // 插件默认使用了markdown-it-toc-done-right
  // 若想注册其他组件可传入一个数组来进行插件使用 [plugin, options]
  // 最终效果: [[plugin, options], [plugin, options]]
  plugins: [],
  // 可对 markdown-it 进行设置, 支持所有配置
  options: {},
  // 是否需要解析 YAML
  frontMatter: true,
  // 需要解析哪些类型的文件
  include: /\.md$/,
  // 不需要解析什么文件
  exclude: null,
  // 在进行转换之前可进行一些操作, 参数为设置配置后的 markdown-it 对象
  setup: (markdown) => markdown,
  // 包裹代码块外层的自定义类名
  wrapClasses: 'markdown-parser',
  // 卡片样式类名
  cardClasses: 'section-card',
  // 每个 markdown 块外部需要包括的组件名，需要保证已经注册或是已全局注册
  wrapRender: '',
  // ```demo 代码块最后转换的组件名 详情使用见下方
  codeRender: 'code-demo',
  // 在模板转换之前/之后进行一些修改或者操作 需要有返回值
  transforms: {
    before: (code, id) => code,
    after: (code, id) => code
  }
}

功能

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

script style

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

TIPS:
插件会解析 script 标签, 它们可以有多个, 但 setup script 标签只能有一个!所有的代码会被转换为 setup function 来执行.

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

<script>
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'
})
</script>

card

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