Vue3整合Markdown-it

本是古典何须时尚 2023-01-19 11:58 14阅读 0赞

## 效果 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpYW5naGVjYWk1MjE3MTMxNA_size_16_color_FFFFFF_t_70]

## 实现 ##

### 依赖 ###

"dependencies": { 
        "axios": "^0.21.1",
        "core-js": "^3.8.3",
        "echarts": "^5.1.1",
        "element-plus": "^1.0.2-beta.40",
        "markdown-it-abbr": "^1.0.4",
        "markdown-it-deflist": "^2.1.0",
        "markdown-it-emoji": "^2.0.0",
        "markdown-it-sub": "^1.0.0",
        "markdown-it-sup": "^1.0.0",
        "qs": "^6.10.1",
        "screenfull": "^5.1.0",
        "vue": "^3.0.4",
        "vue-class-component": "^8.0.0-0",
        "vue-router": "^4.0.3",
        "vue3-markdown-it": "^1.0.8",
        "vuex": "^4.0.0"
      },
      "devDependencies": { 
        "@typescript-eslint/eslint-plugin": "^4.15.1",
        "@typescript-eslint/parser": "^4.15.1",
        "@vue/cli-plugin-babel": "~5.0.0",
        "@vue/cli-plugin-eslint": "~5.0.0",
        "@vue/cli-plugin-router": "~5.0.0",
        "@vue/cli-plugin-typescript": "~5.0.0",
        "@vue/cli-plugin-vuex": "~5.0.0",
        "@vue/cli-service": "~5.0.0",
        "@vue/compiler-sfc": "^3.0.4",
        "@vue/eslint-config-standard": "^6.0.0",
        "@vue/eslint-config-typescript": "^7.0.0",
        "babel-plugin-import": "^1.13.3",
        "eslint": "^7.20.0",
        "eslint-plugin-import": "^2.20.2",
        "eslint-plugin-node": "^11.1.0",
        "eslint-plugin-promise": "^4.3.1",
        "eslint-plugin-vue": "^7.2.0",
        "less": "^4.0.0",
        "less-loader": "^8.0.0",
        "sass": "^1.32.11",
        "sass-loader": "^11.0.1",
        "typescript": "~4.1.5"
      }

### vue页面 ###

<template>
        <el-row>
          <el-col :span="12">
            <el-input style="margin-top: 6px;height: 2500px;min-height:600px;font-size: 20px;" type="textarea" placeholder="请输入内容" v-model="textarea" rows="80" maxlength="20000" show-word-limit clearable resize="none" >
            </el-input>
          </el-col>
          <el-col :span="12">
            <VueMarkdownIt :source='textarea' :plugins='plugins' style="border: 1px solid black;height: 100%;padding-left: 8px;border-radius: 7px;margin-top: 7px;"></VueMarkdownIt>
          </el-col>
        </el-row>
    </template>
    
    <script> import { ref} from 'vue' import VueMarkdownIt from 'vue3-markdown-it' import 'highlight.js/styles/monokai.css' import MarkdownItEmoji from 'markdown-it-emoji' import MarkdownItDeflist from 'markdown-it-deflist' import MarkdownItSub from 'markdown-it-sub' import MarkdownItSup from 'markdown-it-sup' import MarkdownItAbbr from 'markdown-it-abbr' export default { name: "CreateBlog", components: { VueMarkdownIt }, setup: function (){ let textarea = ref('## 博客正文') let plugins = reactive([ { plugin: MarkdownItAbbr }, { plugin: MarkdownItSub }, { plugin: MarkdownItSup }, { plugin: MarkdownItDeflist }, { plugin: MarkdownItEmoji } ]) return { textarea, plugins } } } </script>

### monokai.css ###

monokai.css是markdown-it自身带的样式文件，但是不好看，下面是自定义代码：

pre { 
      /*控制代码不换行*/
      white-space: pre;
      word-wrap: normal;
    }
    
    .hljs { 
      display: block;
      overflow-x: auto;
      padding: 2px 3px !important;
      line-height: 1.1;
      font-size: 16px !important;
      background: #f3f4f5;
      color: #5e6687;
    }
    
    .hljs-tag, .hljs-keyword, .hljs-selector-tag, .hljs-literal, .hljs-strong, .hljs-name { 
      color: #f92672;
    }
    
    .hljs-code { 
      color: #66d9ef;
    }
    
    .hljs-class .hljs-title { 
      color: #df5000;
    }
    
    .hljs-attribute, .hljs-symbol, .hljs-regexp, .hljs-link { 
      color: #bf79db;
    }
    
    .hljs-string, .hljs-bullet, .hljs-subst, .hljs-title, .hljs-section, .hljs-emphasis, .hljs-type, .hljs-built_in, .hljs-builtin-name, .hljs-selector-attr, .hljs-selector-pseudo, .hljs-addition, .hljs-variable, .hljs-template-tag, .hljs-template-variable { 
      color: #5893c2;
    }
    
    .hljs-comment, .hljs-quote, .hljs-deletion, .hljs-meta { 
      color: #969896;
      margin-top: 5px;
    }
    
    .hljs-keyword, .hljs-selector-tag, .hljs-literal, .hljs-doctag, .hljs-title, .hljs-section, .hljs-type, .hljs-selector-id { 
      font-weight: bold;
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpYW5naGVjYWk1MjE3MTMxNA_size_16_color_FFFFFF_t_70]: /images/20221021/4d0b905d56af4e609cd706de6edc9364.png