自制highlightjs中文官网：highlight.liyunxing.top

1.介绍

highlight.js是一个用于在任何web页面上着色显示各种示例源代码语法的JS项目。具有以下特色：

支持 92 种语言，49 种代码格式化风格。
自动检测语言种类
支持多语言混合的代码高亮
支持Node.js
支持使用任何HTML标记
兼容任意js框架

2.使用

2.1 在html中

使用:

<!DOCTYPE html>
  <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Document</title>
      <link rel="stylesheet" href="http://yp.vincestudio.cn/cdn/highlight/default.min.css">
      <style>
        .container {
          width: 50%;
          margin: 0 auto;
        }
      </style>
    </head>

    <body>
      <div class="container">
        <pre
          class="language-js"><code><span class="token keyword">import</span> hljs <span class="token keyword">from</span> <span class="token string">'highlight.js'</span><span class="token punctuation">;</span>
          <span class="token keyword">import</span><span class="token string">'highlight.js/styles/github.css'</span><span class="token punctuation">;</span></code></pre>
      </div>
      <script src="http://yp.vincestudio.cn/cdn/highlight/highlight.min.js"></script>
      <script>
        hljs.highlightAll();
      </script>
    </body>
  </html>

效果:

2.2 在Vue中

创建一个 v-highlight 指令

安装

npm install highlight.js --save
或者
yarn add highlight.js --save

使用
注册并创建全局指令:

// main.js
import Vue from 'vue'
import App from './App.vue'
import hljs from 'highlight.js'
import 'highlight.js/styles/dark.css'

Vue.directive('highlight',function (el) {
  hljs.configure({useBR: true});
  let blocks = el.querySelectorAll('pre');
  blocks.forEach((block) => {
    hljs.highlightBlock(block)
  })
})
new Vue({
  render: h => h(App)
}).$mount('#app')

通过Vue指令在组件中使用:

<template>
  <div class="container" v-highlight>
    <pre class="language-css">
      <code> 
        .container{
          border:1px solid #ff0;
          color:#ddd;
        }
      </code>
    </pre>
  </div>
</template>

效果

2.3 在React中

安装

npm install highlight.js --save
或者
yarn add highlight.js --save

使用
在对应组件内调用

在 class component 中使用

import React, { Component } from 'react'
import hljs from 'highlight.js';
import 'highlight.js/styles/dark.css';

export default class App extends Component {
  componentDidMount() {
    this.highlightCallBack();
  }
  componentDidUpdate() {
      this.highlightCallBack();
  }
  highlightCallBack = () => {
      document.querySelectorAll("pre").forEach(block => {
          try{hljs.highlightBlock(block);}
          catch(e){console.log(e);}
      });
  };
  render() {
    return (
      <div className="container">
        <pre className="language-jsx">
          <code> 
            import React, {'\u007b'} Component {'\u007d'} from 'react' {'\n'}
            import hljs from 'highlight.js';{'\n'}
            import 'highlight.js/styles/default.css';
          </code>
        </pre>
      </div>
    )
  }
}

在 function component 中使用

import React from 'react'
import hljs from 'highlight.js';
import 'highlight.js/styles/dark.css';

function App(){
    React.useEffect(()=>{
        document.querySelectorAll("pre").forEach(block => {
            try{hljs.highlightBlock(block);}
            catch(e){console.log(e);}
        });
    });
    return(
      <div className="container">
        <pre className="language-jsx">
          <code> 
            import React, {'\u007b'} Component {'\u007d'} from 'react' {'\n'}
            import hljs from 'highlight.js';{'\n'}
            import 'highlight.js/styles/default.css';
          </code>
        </pre>
      </div>
    );
}

HighLight.JS在各种环境下的使用（普通html、Vue、React）

1.介绍

2.使用

2.1 在html中

2.2 在Vue中

2.3 在React中