【vue】vue2.x项目中使用md文件

一、Vue项目展示md文件的三种方式

1、将md文件 导入为 html

生成的标题标签自带具有id属性,值为标题内容;
<h2 id="测试">测试</h2>

# 处理md为html字符串,内部依赖了 marked
yarn add markdown-loader
# 处理字符串,用于导出显示
yarn add html-loader
module.exports = defineConfig({
...
  chainWebpack: (config) => {
    config.module
      .rule('md')
      .test(/\.md$/)
      .use('html-loader')
      .loader('html-loader')
      .end()
      .use('markdown-loader')
      .loader('markdown-loader')
      .end()
  },
})

2、将md文件 导入为 vue组件(用于简单展示md可行)

转换后:生成新的html标签包住,没有id属性,不好进行其他操作;
<h2 >测试</h2>

yarn add vue-markdown-loader
  chainWebpack: (config) => {
    config.module
     .rule('md')
      .test(/\.md$/)
      .use('vue-loader')
      .loader('vue-loader')
      .end()
      .use('vue-markdown-loader')
      .loader('vue-markdown-loader/lib/markdown-compiler')
      .options({
        raw: true,
      })
  },

3、输出md原始语法,使用 markedmarkdown-itmarkdown-it-vue等插件解析

# 配置导入md文件的loader
yarn add html-loader
  chainWebpack: (config) => {
    config.module
      .rule('md')
      .test(/\.md$/)
      .use('html-loader')
      .loader('html-loader')
      .end()
  },

marked

介绍:

  • 解析后默认标题为id
  • markdown-loader使用了该插件;
  • 将md语法的字符串转为html标签字符串;
  • marked 是一个 JavaScript 编写的全功能 Markdown 解析和编译器;最初是为 Node.JS 编写,现在已完全兼容客户端浏览器;
  • 需要一些其他依赖来增强功能;
yarn add marked
// 使用
<div v-html="mdHtml"></div>
---
import { marked } from 'marked'
this.mdHtml = marked('## hello')
// <h2 id="hello">hello</h2>

markdown-it

介绍:

  • 解析后默认不带id,需要配置;
  • markdown-it-vue封装了该插件;
  • 用于将md语法字符串转为html语法字符串,同marked
  • Markdown 解析器,100% CommonMark 支持,易扩展
  • 需要一些其他依赖来增强功能;
yarn add markdown-it
// 使用
<div v-html="mdHtml"></div>
---
import MarkdownIt from 'markdown-it'
const md = new MarkdownIt()
this.mdHtml = md.render('## hello')
// <h2>hello</h2>

markdown-it-vue

  • 缺点:依赖包太大;
  • 封装了markdown-it、github-markdown-css、highlight.js等一些插件;
<MarkdownItVue :content="mdHtml"></MarkdownItVue>
---
import a from './a.md'
import MarkdownItVue from 'markdown-it-vue'
import 'markdown-it-vue/dist/markdown-it-vue.css'

  created() {
    this.mdHtml = a
  },

样式说明

使用不同样式风格,可引入相关插件

# 样式
yarn add github-markdown-css
import 'github-markdown-css'

代码高亮

highlight.js

对于使用vue-markdown-loader,直接入口文件引入即可

yarn add highlight.js
# 风格按需选择,这里使用github.css
import 'highlight.js/styles/github.css'

对于使用markdown-loader,代码高亮需要额外配置,以下两种方式都可以

import hljs from 'highlight.js'
// 方式一:指令v-highlight
Vue.directive('highlight', function (el) {
  hljs.configure({ useBR: true })
  let blocks = el.querySelectorAll('pre code')
  blocks.forEach((block) => {
    hljs.highlightBlock(block)
  })
})
// 使用
// <div class="markdown-body" v-html="mdHtml" v-highlight></div>
// 方式二:全局配置
Vue.prototype.$hljs = hljs
// 使用
<div class="markdown-body" v-html="mdHtml"></div>
---
  mounted() {
     this.$hljs.highlightAll()
  },

推荐代码高亮工具:prismjs、babel-plugin-prismjs

<div class="markdown-body line-numbers" v-html="mdHtml"></div>
  mounted() {
    this.$prism.highlightAll()
  },
module.exports = {
  presets: ['@vue/cli-plugin-babel/preset'],
  // 配置md代码高亮插件
  plugins: [
    [
      'prismjs',
      {
        languages: [
          'html',
          'css',
          'js',
          'php',
          'dart',
          'bash',
          'java',
          'nginx',
          'python',
        ],
        plugins: ['line-numbers', 'show-language', 'copy-to-clipboard'],
        theme: 'tomorrow',
        css: true,
      },
    ],
  ],
}

二、扩展

  • Markdown 编辑器-mavonEditor
  • 富文本编辑器解析-vue-quill-editor
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
当你使用 HBuilderX 创建 Vue 项目时,它会自动生成一些文件文件夹,这些文件文件夹组成了 Vue 项目的基本结构。下面是 Vue 项目的基本结构和目录、文件的作用: ``` ├── node_modules/ // 项目依赖的模块 ├── public/ // 静态资源文件夹 │ ├── favicon.ico // 网站图标 │ └── index.html // Vue 项目的入口文件 ├── src/ // 源代码文件夹 │ ├── assets/ // 存放图片、字体等静态资源 │ ├── components/ // 存放 Vue 组件 │ ├── router/ // 存放 Vue Router 相关代码 │ ├── store/ // 存放 Vuex 相关代码 │ ├── App.vue // Vue 根组件 │ └── main.js // Vue 应用的入口文件 ├── .browserslistrc // 浏览器兼容性配置文件 ├── .eslintrc.js // ESLint 配置文件 ├── babel.config.js // Babel 配置文件 ├── package.json // 项目的依赖和脚本配置文件 └── README.md // 项目的说明文档 ``` - `node_modules/`:存放项目依赖的所有第三方模块,这些模块是通过 `npm` 或 `yarn` 安装的; - `public/`:存放静态资源文件夹,例如图片、字体、网站图标等; - `src/`:存放 Vue 项目的源代码文件夹,包含了 Vue 组件、Vue Router、Vuex 等相关代码; - `src/assets/`:存放图片、字体等静态资源; - `src/components/`:存放 Vue 组件,每个组件通常由一个 `.vue` 文件和一个同名的 `.js` 或 `.ts` 文件组成; - `src/router/`:存放 Vue Router 相关代码,包含了路由配置和路由守卫等; - `src/store/`:存放 Vuex 相关代码,包含了状态管理、异步操作和模块化等; - `src/App.vue`:Vue 根组件,所有的子组件都将被挂载到这个组件; - `src/main.js`:Vue 应用的入口文件,负责初始化 Vue 实例和注册全局组件、过滤器等; - `.browserslistrc`:浏览器兼容性配置文件,用来告诉 Babel 和 Autoprefixer 应该支持哪些浏览器; - `.eslintrc.js`:ESLint 配置文件,用来检查和规范 JavaScript 代码; - `babel.config.js`:Babel 配置文件,用来将 ES6+ 的 JavaScript 代码转换成浏览器能够理解的代码; - `package.json`:项目的依赖和脚本配置文件,其包含了项目的名称、版本、作者、依赖等信息; - `README.md`:项目的说明文档,用来介绍项目的功能、使用方法、贡献指南等信息。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值