ReactJS 实现代码高亮

使用插件google的prettify和jquery的format 完成了一套很完美的代码高亮显示,还能自动格式化。

先说jquery.format的接入【我这里开发是用的webpack】

在引入文件中使用reqiure方法,把jquery.format加入到js代码中。

1
require('./jquery.format.js');

jquery.format.js 这个文件我放在了与引入文件同级的目录下

就可以样就可以了。

在说引入prettify到react中,这个当然是在html页面中进行的了,所以在html中引入

1
2
<script src="https://cdn.bootcss.com/prettify/r298/prettify.min.js?skin=sunburst"></script>
<script src="https://cdn.bootcss.com/prettify/r298/lang-sql.min.js?skin=sunburst"></script>

就这样就可以了。

然后把我们需要的高亮代码的css也加入进来吧

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
pre .str, code .str { color: #65B042; } /* string  - green */
pre .kwd, code .kwd { color: #E28964; } /* keyword - dark pink */
pre .com, code .com { color: #AEAEAE; font-style: italic; } /* comment - gray */
pre .typ, code .typ { color: #89bdff; } /* type - light blue */
pre .lit, code .lit { color: #3387CC; } /* literal - blue */
pre .pun, code .pun { color: #fff; } /* punctuation - white */
pre .pln, code .pln { color: #fff; } /* plaintext - white */
pre .tag, code .tag { color: #89bdff; } /* html/xml tag - light blue */
pre .atn, code .atn { color: #bdb76b; } /* html/xml attribute name - khaki */
pre .atv, code .atv { color: #65B042; } /* html/xml attribute value - green */
pre .dec, code .dec { color: #3387CC; } /* decimal - blue */
pre.prettyprint, code.prettyprint {
background-color: #000;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
-o-border-radius: 8px;
-ms-border-radius: 8px;
-khtml-border-radius: 8px;
border-radius: 8px;
}
pre.prettyprint {
width: 95%;
margin: 0.2em auto;
padding: 1em;
white-space: pre-wrap;
}
/* Specify class=linenums on a pre to get line numbering */
ol.linenums { margin-top: 0; margin-bottom: 0; color: #AEAEAE; } /* IE indents via margin-left */
li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8 { list-style-type: none }
/* Alternate shading for lines */
li.L1,li.L3,li.L5,li.L7,li.L9 { }
@media print {
pre .str, code .str { color: #060; }
pre .kwd, code .kwd { color: #006; font-weight: bold; }
pre .com, code .com { color: #600; font-style: italic; }
pre .typ, code .typ { color: #404; font-weight: bold; }
pre .lit, code .lit { color: #044; }
pre .pun, code .pun { color: #440; }
pre .pln, code .pln { color: #000; }
pre .tag, code .tag { color: #006; font-weight: bold; }
pre .atn, code .atn { color: #404; }
pre .atv, code .atv { color: #060; }
}

最后看下react里面是如何操作的

在render方法里面操作,稍微有点基础知识的肯定都知道的。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
render:function(){
if(this.props.data.length > 0){
return (
<table className="table table-striped table-bordered table-hover table-responsive">
<thead>
<colgroup>
<col width="5%"></col>
<col></col>
<col width="20%"></col>
<col width="20%"></col>
<col width="10%"></col>
</colgroup>
<tr>
<th>ID号</th>
<th>SQL Template</th>
<th>参数</th>
<th>备注</th>
<th>创建日期</th>
</tr>
</thead>
<tbody id="itemContainer">
{this.props.data.map(function(i){
let ctime = moment.unix(i.ctime).format('YYYY-MM-DD');
let template = $.format(i.template, {'method':'sql'});
let config = $.format(i.config, {'method':'json'});
return (
<tr key={i.autokid}>
<td>{i.autokid}</td>
<td style={{'wordWrap':'break-word','wordBreak':'break-all','verticalAlign':'top'}} >
<pre className="prettyprint">
<code className="language-sql">{template}</code>
</pre>
</td>
<td style={{'verticalAlign':'top'}}>
<pre className="prettyprint">
<code className="language-js">{config}</code>
</pre>
</td>
<td style={{'verticalAlign':'top'}}>{i.comment} bezhu de qing</td>
<td style={{'verticalAlign':'top'}}>{ctime}</td>
</tr>
);
})}
</tbody>
</table>
);
}else{
return <Loading type='spinning-bubbles' color='#e3e3e3'/>;
}
}

最后为了是的pretty的效果产生我们还要进行一个启动的操作

1
2
3
4
5
6
componentDidMount(){
prettyPrint();
},
componentDidUpdate(){
prettyPrint();
},

可以了,就是这样的。