Foreword
Blog Campus Essay writing can be edited using Markdown, when the display code, you can use the following syntax to display the code block:
```language
code-content
```In general, it pointed out languagelater, should be able to achieve syntax highlighting. The basic principle is to code 关键字, 变量, 函数waits for the character do regularization match the contents of the code block of plaintext, the syntax coloring scheme with fixed content (CSS style) correspond.
However, Goose! ! Most programming languages can achieve a good highlight, but the effect is poor Matlab, syntax style is wrong! He looked very uncomfortable.
Like this:
% 为输出创建文件
!touch testFile.txt
fid = fopen('testFile.txt','w');
for i = 1:10
frprintf(fid,'%6.2f \n',i);
endAs obsessive-compulsive disorder, I want to Matlab and Matlab software code highlighting become highlighted in exactly the same way. Man of few words said, open dry!
The basic syntax highlighting content
Before the transformation, we must first understand the basic content syntax highlighting.
In general, as a programming language, syntax include the following basic items:
- keyword keywords, which we used for, if, else, end, etc.
- string string, some characters as text
- params variables, variables define yourself
- comment comment, the code will generally have a comment
- bracket brackets, the code will have a generally occur in pairs in parentheses, curly brackets
These, as is a syntax highlighting scheme, the basic content matching needs. The syntax of these projects, there will be certain rules (grammar or how to call), by regular expression code block can be written in the corresponding basic syntax items that match out. For example, you have a number of code if, then the regular expressions, you can bring them all to match.
Paste style tags
When matched to the basic syntax of the project, affix their corresponding style tags, for example, to match if, to affix labels Keywords:
<span class="matlab-keyword">if</span>In this way, ifthis keyword will be matlab-keywordcolored style. And this is also the same as the other, to affix the corresponding style.
Identification code highlighting
So, a bunch of text, I recognize how this part of the text is to highlight the code?
Here we pass <pre>and </pre>so the tag content to wrap the code, make the code to identify the needs of this text is highlighted code. In order to distinguish other styles, markdown generally only need to represent Matlab code needs highlighted in style:
<pre class="matlab-code">
% 为输出创建文件
!touch testFile.txt
fid = fopen('testFile.txt','w');
for i = 1:10
frprintf(fid,'%6.2f \n',i);
end
</pre>Blog garden background configuration
Overall, the implementation code highlighting, basically includes these major elements:
- CSS style configuration syntax highlighting
- Configuration syntax regular expression matching scheme JS
- Markown to block specific label wrap, implementation calls
Syntax highlighting css style file
.cnblogs-markdown .matlab-code{
display: block;
color: #333;
overflow-x: auto;
background: #F2F4F5 !important;
border: none !important;
font-family: 'Microsoft YaHei', 'SF Pro Display', Roboto, Noto, Arial, 'PingFang SC', sans-serif !important;
padding: 1em !important;
font-size: 14px !important
}
pre .matlab-keyword, code .matlab-keyword {color: #0000fe;}
pre .matlab-string, code .matlab-string {color: #a020ef;}
pre .matlab-number, code .matlab-number {color: #333;}
pre .matlab-bracket, code .matlab-bracket {color: #333;}
pre .matlab-comment, code .matlab-comment {color: #228b22;}
pre .matlab-comment span, code .matlab-comment span {color: #228b22; font-weight: normal;}Regular expression matching js file
/*
MATLAB Highlighter 1.55, a small and lightweight JavaScript library for colorizing your MATLAB syntax.
http://matlabtricks.com/matlab-highlighter
Licensed under the MIT license
Copyright (c) 2013, Zoltan Fegyver
*/
function highlightMATLABCode(d) {
function g(i) {
return (i >= "A" && i <= "Z") || (i >= "a" && i <= "z") || (i == ")")
}
function m(r, j, i) {
var s = j.index,
t;
while (s >= i) {
t = r.charAt(--s);
if (t == "\n") {
break
}
if (t == "'") {
continue
} else {
return !g(t)
}
}
return true
}
function a(i) {
var j = i.length - 1,
r;
while (j > 0) {
r = i.charAt(--j);
if (r == "\n") {
return true
}
if (r == "%") {
return false
}
}
return true
}
function n(t) {
var s, u = 0,
r, v = /(\'[^\'\n]*\')/gi,
j = [];
while (s = v.exec(t)) {
if (m(t, s, u)) {
var w = t.slice(u, s.index);
for (var i = j.length - 2; i >= 0; i -= 2) {
if (w.indexOf("\n") > -1) {
break
}
w = w.concat(j[i])
}
if (a(w)) {
r = s.index + s[1].length;
j.push(t.slice(u, s.index));
j.push(t.slice(s.index, r));
u = r
}
}
}
j.push(t.slice(u));
return j
}
function b(u, j) {
var w = '<span class="',
v = "</span>";
if (j) {
return [w, 'matlab-string">', u, v].join("")
} else {
var t = [{
r: /\b('|break|case|catch|classdef|continue|else|elseif|end|for|function|global|if|otherwise|parfor|persistent|return|spmd|switch|try|while|')\b/gi,
s: "keyword"
}, {
r: /\b([0-9]+)\b/gi,
s: "number"
}, {
r: /([(){}\[\]]+)/gi,
s: "bracket"
}, {
r: /(%[^\n]*)/gi,
s: "comment"
}];
for (var r = 0, s = t.length; r < s; r++) {
u = u.replace(t[r].r, [w, "matlab-", t[r].s, '">$1', v].join(""))
}
return u
}
}
function q(u) {
var w = [],
s = [];
if (typeof u === "undefined") {
u = {
tagPre: true,
tagCode: false,
className: "matlab-code"
}
}
if (typeof u !== "object") {
w.push(document.getElementById(u))
} else {
if (u.tagCode) {
s.push("code")
}
if (u.tagPre) {
s.push("pre")
}
for (var t = 0; t < s.length; t++) {
var x = document.getElementsByTagName(s[t]);
for (var r = 0, v = x.length; r < v; r++) {
if ((u.className == "") || ((x[r].className.toString().length > 0) && ((" " + x[r].className + " ").indexOf(" " +
u.className + " ") > -1))) {
w.push(x[r])
}
}
}
}
return w
}
var p = q(d);
for (var f = 0, o = p.length; f < o; f++) {
var c = n(p[f].innerHTML.toString().replace(/<br\s*\/?>/mg, "\n")),
h = [],
l = " ";
for (var e = 0, k = c.length; e < k; e++) {
h.push(b(c[e], e % 2))
}
p[f].innerHTML = h.join("").replace(/^[ ]/gm, l).replace(/\n/gm, "<br>").replace(/\t/gm, l + l)
}
};Call demo
<pre class="matlab-code">
% 为输出创建文件
!touch testFile.txt
fid = fopen('testFile.txt','w');
for i = 1:10
frprintf(fid,'%6.2f \n',i);
end
</pre>Highlight results
% As output creation file
! Touch testFile.txt
; FID = the fopen ( 'testFile.txt', 'W')
for I = 1:10
frprintf (FID, '% 6.2f \ n-', I);
End
BUG
While this can be achieved is highlighted, but the same time, the Copy button top right corner of the block lost replication. The reason is that normal block is to be construed as highlighted
<pre>
<code>
</code>
</pre>Js code copies the call codesection plus id = "copy_target_1"so similar labels, in order to be recognized as the content can be copied, and the previous method does not appear code, so the function can not achieve!