Vue2.0怎么结合marked+highlight?
发布于 1 个月前 作者 anshengme 275 次浏览 来自 问答

整了半天没整出来,markdown编辑器就放弃了,想找个解析个高亮的插件,就找到了上述两个,看了一段时间,原来官网就有markdown实例,果断搬过来用了,但是样式是在太丑了, aaa 代码就直接放到下面了,

<template>
 <div>

   <div id="editor">
     <textarea v-model="input"></textarea>
     <div v-html="compiledMarkdown"></div>
   </div>
 </div>
</template>

<script>
 import Marked from 'marked'
 import highlightjs from 'highlight.js'
 import 'highlight.js/styles/googlecode.css'

 export default {
   components: {Marked, highlightjs},
   data() {
       return {
         input: '# hello'
       }
     },
   computed: {
       compiledMarkdown: function () {
         return Marked(this.input, { sanitize: true })
       }
     },
 }
</script>

<style>
 #editor {
   height: 500px;
   font-family: 'Helvetica Neue', Arial, sans-serif;
 }

 textarea, #editor div {
   display: inline-block;
   width: 49%;
   height: 100%;
   vertical-align: top;
   box-sizing: border-box;
   padding: 0 20px;
 }

 textarea {
   border: none;
   border-right: 1px solid #ccc;
   resize: none;
   outline: none;
   background-color: #f6f6f6;
   font-size: 14px;
   font-family: 'Monaco', courier, monospace;
   padding: 20px;
 }

 code {
   color: #f66;
 }
</style>

代码块样式是在不能忍受,

3 回复

QQ20161127-0@2x.png

同秀一发我的博客后台文章编辑页, 使用element-ui自写的单个Markdown组件,支持图片上传

然后最后部署的时候还是把highlight给去掉了,打包足足多了700K,实在是忍不了

@Smallpath 大神,代码块渲染你是怎么做的呀?我就这块卡住了。

@anshengme 翻marked文档就有,直接配

marked.setOptions({
  highlight: function (code, lang, callback) {
    require('pygmentize-bundled')({ lang: lang, format: 'html' }, code, function (err, result) {
      callback(err, result.toString());
    });
  }
});
回到顶部