如何在代码中引入markdown文件和样式

Blink46
470 阅读2分钟

wallhaven-o5g6r7.png

网页中什么时候需要用到 markdown 呢？

我们平时做说明文档或者技术文档网页的时候，就可以使用markdown来做

第一步：引入 Github 的 Markdown 样式

  • 引入 github-markdown-css

  • 在main.js中引入

    • import 'github-markdown-css'

  • 在需要使用 markdown 样式的元素外层加上class = markdown-body

  • 实例：

<template>
    <article class="markdown-body">
        <h1>安装</h1>
        <p>打开终端运行下列命令：</p>
        <pre><code>npm install hx-gulu-ui</code></pre>
        <p>或</p>
        <pre><code>yarn add hx-gulu-ui</code></pre>
        <p>
            下一节：<a href="#/doc/getstart">开始使用</a>
        </p>
    </article>
</template>

第二步： 支持引入 markdown 文件

上面已经支持了markdown的样式了，但是内容还是用html写的，用 markdown 文件写更好些。 那怎样才能支持引用 markdown 文件呢。

  • 引入 marked

    • 安装： npm i -D marked

  • 创建md.ts文件

// @ts-nocheck
import path from 'path'
import fs from 'fs'
import {marked} from 'marked'

const mdToJs = str => {
  const content = JSON.stringify(marked(str))
  return `export default ${content}`
}

export function md() {
  return {
    name: 'markdown',
    transform(src, id) {  // 用于 rollup
      if (id.endsWith('.md')) {
        return {
          code: mdToJs(src),
          map: null // provide source map if available
        }
      }
    },
    configureServer(server) { // 用于开发
      server.middlewares.use(async (req, res, next) => {
        // custom handle request...
        if (req.url.endsWith('.md')) {
          res.type = 'js'
          const filePath = path.join(process.cwd(), req.url)
          res.body = mdToJs(fs.readFileSync(filePath).toString())
        } else {
          await next()
        }
      })
    }
  }
}
  • 在vite.config.ts中引用md.ts插件
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from "path"
import { md } from './plugins/md.ts'

export default defineConfig({
  plugins: [vue(), md()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, 'src')
    }
  },
  server: {
    open: 'http://localhost:5173/'
  },
})
  • 创建 md 文件

此时已经可以引用 markdown文件了

示例：

## 介绍

King UI 是一款基于 Vue 3 和 TypeScript 的 UI 组件库。

这款组件库其实是我为了总结自己这几年的技术经验而写的，全程亲手编写，尽量不采用第三方库，包括你现在看到的这个官网也几乎都是我自己写的。

所以如果强烈不建议你将此 UI 库用于生产环境。但如果你是抱着看源代码的目的来的，那么这个库还是值得一看的。源代码放在了 github.com/xxxxxxx，历史提交信息非常规范，你可以按提交的顺序逐个查看；你也可以直接查看每个组件的源代码和示例，运行方法见 README.md。

下一节：[安装](#/doc/install)
  • 在vue文件中引入

示例：

<template>
    <article class="markdown-body" v-html="md"></article>
</template>

<script setup>
import intro from '../../markdowm/intro.md'
const md = intro
</script>

结尾：如此我们已经可以引用 markdown 文件并在网页中展示 markdown 样式了，在做说明文档网页的时候，这是一个很不错的选择

avatar
文章
阅读
粉丝