效果

实现

依赖

  "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;
}