Rainbow 代码高亮

What is this?

Rainbow is a code syntax highlighting library written in Javascript.

It was designed to be lightweight (2.5kb), easy to use, and extendable.

It is completely themable via CSS.

官方:https://craig.is/making/rainbows 

代码显示的样式:

/*
 * This is some sample code to illustrate how things look!
 */
import Musician from './liverpool';

class Paul extends Musician {
    constructor(bass) {
        super(bass);
    }

    get fullName() {
        return 'Paul McCartney';
    }

    perform() {
        this.play(this.instrument);
        this.sing();
    }
}

export default Paul;

使用方法:

    1. 首先添加标志 data-language  ,下面的例子是python的例子
<pre><code data-language="python">def openFile(path):
    file = open(path, "r")
    content = file.read()
    file.close()
    return content</code></pre>

如果你想要html高亮,把python换成html即可

    2. 接下面在head中引入 css

 

<link href="/assets/css/theme.css" rel="stylesheet" type="text/css">

3.然后在

</body>

之前添加

<script src="/assets/js/rainbow.js"></script>
<script src="/assets/js/language/generic.js"></script>
<script src="/assets/js/language/python.js"></script>

如果你是用在note.js中可以直接用下面的命令行操作

npm install rainbow-code