vue中代码高亮

我们平时看的博客中的代码高亮效果是怎么实现的呢,人家是怎么实现的反正我是不知道,废话不多说,上代码, 项目是vue项目

1. 首先要安装一个依赖

	npm i highlight.js

2. 依赖安装完成后创建一个自定义指令(单独封装一个文件highlight.js) 代码如下

    // 代码高亮插件
   import hljs from 'highlight.js'
   import 'highlight.js/styles/vs.css'
   import 'highlight.js/styles/default.css';
   // 由于这个插件库自带的代码高样式不是很好看,这里引入一个自己改的样式文件
   import '../styles/codePage.scss'
   const install = function (Vue) {
       Vue.directive('hcode', function (el) {
           let blocks = el.querySelectorAll('pre code');
           blocks.forEach((block) => {
               hljs.highlightBlock(block)
           })
       })
       Vue.directive('code', {
           deep: true,
           bind (el, binding) {
               let targets = el.querySelectorAll('code')
               targets.forEach(target => {
                   if (typeof binding.value === 'string') {
                       target.textContent = binding.value
                   }
                   hljs.highlightBlock(target)
               })
           },
           componentUpdated (el, binding) {
               let targets = el.querySelectorAll('code')
               targets.forEach(target => {
                   if (typeof binding.value === 'string') {
                       target.textContent = binding.value
                       hljs.highlightBlock(target)
                   }
               })
           },
       })
   
   }
   export default install

3. 由于插件库自带的代码高亮样式不是很好看,这里我自己改了一下,需要在上面的highlight.js中引入,在第二步的代码也有说明,样式代码如下

	pre{
	  margin: 0 !important;
	  background: #282c34 !important;
	  color: #abb2bf !important;
	}
	.css.hljs.language-css,
	.javascript.hljs.language-javascript,
	.html.hljs.language-xml {
	  background: #282c34 !important;
	  color: #abb2bf !important;
	  padding: 0px;
	  .hljs-number {
	    color: #abb2bf !important;
	  }
	  .hljs-attribute {
	    color: #75d0fa !important;
	  }
	  // css选择器颜色
	  .hljs-selector-tag {
	    color: #e6db74 !important;
	  }
	  // 括号
	  .hljs-tag {
	    color: #fff !important;
	  }
	  // 对象的key
	  .hljs-attr {
	    color: #70ccf7 !important;
	  }
	  // 对象value
	  .hljs-string {
	    color: #abb2bf !important;
	  }
	  // 内置对象
	  .hljs-variable.language_ {
	    color: #75d0fa !important;
	  }
	  // 方法
	  .hljs-title.function_ {
	    color: #e6db74 !important;
	  }
	  // 构造方法
	  .hljs-title.class_ {
	    color: #07fad1 !important;
	  }
	  // js注释
	  .hljs-comment{
	    
	  }
	}
	// 标签名称,js关键字
	.hljs-built_in,
	.hljs-keyword,
	.hljs-name,
	.hljs-selector-tag,
	.hljs-tag {
	  color: rgb(91, 161, 241) !important;
	}

4. 自定义指令封装完成之后在main.js中注册

    import highlight from './util/highlight'
    Vue.use(highlight)

5. 在组件中使用

	<h2>js的使用</h2>
    <div v-code>
      <pre>
        <code class="javascript">
        	console.log('嘿嘿')
        </code>
      </pre>
    </div>
    <!--========================================-->
    <h2>css的使用</h2>
    <div v-code>
      <pre>
        <code class="css">
        	body{
        		margin:0;
				padding:0;
			}
        </code>
      </pre>
    </div>
    <!--========================================-->
    <h2>csshtml的使用,  这里<>符目前只能用&lt和&gt代码代替, 还没找到解决办法</h2>
    <div v-code>
      <pre>
        <code class="html">
            &lt;div&gt;123&lt;/div&gt;
        </code>
      </pre>
    </div>

6. 最终效果图
   
   代码高亮样式可以自行在样式文件中进行修改

ok, 这就代码高亮的所有内容了,如果后期html使用的问题有更好的解决办法在更新上来,如果大佬们有办法也可以指点指点