博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
CES2
阅读量:5166 次
发布时间:2019-06-13

本文共 6087 字,大约阅读时间需要 20 分钟。

前言

博客园随笔写作可以使用 Markdown 进行编辑,当展示代码时,可以使用下面的语法来对代码块进行展示:

​```languagecode-content​```

一般来说,指明了 language 后,应该是可以是实现语法高亮的。其基本原理就是将代码中的 关键字变量函数 等待字符做正则化匹配,将纯文本的代码内容分块,与固定语法内容的着色方案(css样式)对应上。

然鹅!!大部分编程语言都能实现较好的高亮,而 Matlab 效果却很差,语法样式是错误的!看着很不舒服。

就像下面这样:

% 为输出创建文件!touch testFile.txtfid = fopen('testFile.txt','w');for i = 1:10    frprintf(fid,'%6.2f \n',i);end

作为强迫症的我想把 Matlab 代码高亮变成和 Matlab软件中高亮方式一模一样。话不多说,开干!

语法高亮的基本内容

在改造之前,首先得理解语法高亮的基本内容。

一般来说,作为一种编程语言,都包括以下基本语法项目:

  • keyword 关键字,也就是我们常用 for、if、else、end等等
  • string 字符串,作为文本的一些字符
  • params 变量,自己定义的变量
  • comment 注释,代码一般都会有注释
  • bracket 括号,一般地代码都会有成对出现的圆括号、花括号

以上这些,就是作为一个语法高亮方案,所需要匹配的基本内容。这些语法项目,都会有一定的规律(不然怎么叫语法),通过正则表达式,可以将写好的代码块中,对应的语法基本项目匹配出来。比如你的代码中有很多个 if ,那么通过正则表达式,就可以将他们全部匹配到。

贴上样式标签

当匹配到基本的语法项目后,将他们贴上对应的样式标签,例如对于匹配到的 if ,将其贴上关键字标签:

if

这样,if 这个关键字就会被 matlab-keyword 样式着色。其他的也和这个一样,贴上对应的样式即可。

代码高亮识别

那么,在一堆文字中,我怎么识别这部分文字就是要高亮的代码?

在这里我们通过 <pre></pre>这样一对标签来包裹代码内容,让代码识别到这段文字是需要高亮的代码。为了区别其他样式,一般在markdown中只需要这样来表示代码需要高亮成 Matlab 样式:

% 为输出创建文件!touch testFile.txtfid = fopen('testFile.txt','w');for i = 1:10    frprintf(fid,'%6.2f \n',i);end

博客园后台配置

总的来说,实现代码高亮,基本上主要包括这几大内容:

  • 配置语法高亮CSS样式
  • 配置语法正则表达式匹配方案JS
  • Markown 中以特定标签包裹代码块,实现调用

语法高亮的css样式文件

.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;}

正则表达式匹配的js文件

/*MATLAB Highlighter 1.55, a small and lightweight JavaScript library for colorizing your MATLAB syntax.http://matlabtricks.com/matlab-highlighterLicensed under the MIT licenseCopyright (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 = '";        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(/
/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, "
").replace(/\t/gm, l + l) }};

调用演示

% 为输出创建文件!touch testFile.txtfid = fopen('testFile.txt','w');for i = 1:10    frprintf(fid,'%6.2f \n',i);end

高亮结果

% 为输出创建文件!touch testFile.txtfid = fopen('testFile.txt','w');for i = 1:10    frprintf(fid,'%6.2f \n',i);end

BUG

虽然这样做可以实现高亮,但是于此同时,代码块右上角的 复制按钮失去了复制功能。原因是正常的代码块是这样被解释成高亮的

复制调用的js代码会将 code 部分加上 id = "copy_target_1" 这样类似的标签,才能被识别成可以复制的内容,而前面的方法并未出现code,所以功能实现不了!

转载于:https://www.cnblogs.com/ctgu/p/11518604.html

你可能感兴趣的文章
Generate SSH key
查看>>
URL中不应出现汉字
查看>>
SSH框架面试总结----1
查看>>
如何防止Arp攻击
查看>>
ClassList 标签的用法
查看>>
小细节:Java中split()中的特殊分隔符 小数点
查看>>
【编程思想】【设计模式】【行为模式Behavioral】中介者模式Mediator
查看>>
后端接口时间戳或者随机数的作用
查看>>
IOS越狱环境搭建
查看>>
tomcat docBase 和 path
查看>>
java默认语法、EL、JSTL表达式,JSTL和struts Tag标签的使用总结
查看>>
复杂度分析
查看>>
Vue笔记:使用 axios 发送请求
查看>>
富文本编辑器 - RichEditor
查看>>
LintCode刷题笔记-- Count1 binary
查看>>
java webcontroller访问时报415错误
查看>>
qcow2、raw、vmdk等镜像格式
查看>>
.NET:CLR via C# Assembly Loading
查看>>
CentOS安装rar及用法
查看>>
TYVJ-P1864 守卫者的挑战 题解
查看>>