序

一直对jekyll的jekyll-clean主题代码高亮不满意,很喜欢monokai的主题. 早晚得走这一遭,今天折腾折腾… 一折腾起来还真要命…

仔细看了jekyll的官方文档

官方中介绍的有比较简单,没有那么细的配置. 最终结合万能的百度,参考Jekyll 代码高亮的几种选择 得知了rouge的样式,生成一份样式如下:

$ rougify style monokai.sublime > rouge.css

然后将原有的syntax.css替换掉,测试了一下背景颜色没有变化,于是单独添加css样式:

<style>
    pre{
        background: rgba(0, 0, 0, 0.95);
    }
</style>

测试显示正常,完美运行.附_config.yml的相关配置:

highlighter: rouge
markdown: kramdown

折腾的不止这么点

折腾了一下后,发现界面果然是美观了好多,是我喜欢的样式.内心的小鹿好像比较愉悦了呀. 但是…翻一翻之前的内容2017-05-24-CSDN的Markdown帮助.好像有哪里不对. 没错,就是CSDN中的序列图sequence跟流程图flow的显示是一片漆黑啊,code中的内容没有高亮. 好在CSDN附了对应的语法说明,得知js-sequence-diagrams与flowchart.js这俩东西.

接着折腾..

为了搞定js-sequence-diagrams与flowchart.js这俩东西,下载了bower,安装了依赖. 安装bower出现了点问题,好在解决2017-06-09-使用npm安装bower卡顿解决倒没有耗时很久. js-sequence-diagrams的使用,根据官方的README.md,使用起来到时顺风顺水. flowchart.js,就卡了好久: 官方案例是对指定的一个div的id进行渲染.但是咱们是用markdown写的啊,一个页面可能会有很多,所以需要使用css选择器. 好在鄙人前端也了解一点,一如js跟css文件后,开撸:

$(document).ready(function() {
    // 流程图
    $("pre code.language-flow").each(function(i, element) {
        var diagram = flowchart.parse(element.html());
        diagram.drawSVG(element);
    });
    // 流程图前景色是黑色,所以设置背景颜色为白色
    $("pre code.language-flow").parent().css('background-color', 'white');
});

看起来好像没啥毛病,jekyll server一下,控制台报错s is null. 引入的是min.js,改用未压缩的,报错TypeError: Cannot read property 'key' of null. 这下就蛋疼了…网上搜一搜,好像用flowchart.js这东西的人不多啊,没啥关联的内容. 想一想还是看官方github吧,到了issues一看,还真找到一个. 有个老外,问了一个问题issues/65, 结果回答的是一个国人啊,瞬间感觉github高大上了有木有(咳咳…本来就高大上). negativelo告知,flowchart.parse里面的内容每一行语法需要加上换行符\n:

你的语法有问题 在没一个动作后面加 \n

var diagram = flowchart.parse('st=>start: 伍|past:>http://www.google.com[blank]\n' +
    'e=>end: Ende:>http://www.google.com\n' +
    'op1=>operation: My Operation|past\n' +
    'op2=>operation: Stuff|current\n' +
    'sub1=>subroutine: My Subroutine|invalid\n' +
    'cond=>condition: Yes or No?|approved:>http://www.google.com\n' +
    'c2=>condition: Good idea|rejected\n' +
    'io=>inputoutput: catch something...|request\n' +
    'st->op1(right)->cond\n' +
    'cond(yes, right)->c2\n' + 
    'cond(no)->sub1(left)->op1\n');

我好像明白了点什么… 改一下:

$(document).ready(function() {
    // 流程图
    $("pre code.language-flow").each(function(i, element) {
        var texts = $("pre code.language-flow").text().split('\n');
        var code = '';
        for (var i = 0; i < texts.length; i++) {
            var line = texts[i];
            code += line + '\n';
        }
        var diagram = flowchart.parse(code);
        diagram.drawSVG(element);
    });
    $("pre code.language-flow").parent().css('background-color', 'white');
});

再次查看,没毛病,就是原先的内容还在啊,老铁,为啥画图了,内容不清空呢… 示例用的是id,我传的是element,不在理啊,好吧,我自己清…

$(document).ready(function() {
    // 流程图
    $("pre code.language-flow").each(function(i, element) {
        var texts = $("pre code.language-flow").text().split('\n');
        var code = '';
        for (var i = 0; i < texts.length; i++) {
            var line = texts[i];
            code += line + '\n';
        }
        var diagram = flowchart.parse(code);
        $(element).html('');
        diagram.drawSVG(element);
    });
    $("pre code.language-flow").parent().css('background-color', 'white');
});

至此,完成了CSDN的markdown语法中的时序图跟流程图的显示问题.还有个table啥的,不是很难看,先放着…

TODO

现在看着顺眼了,是的,没毛病嗯. 有个问题是这个bower,下载的依赖啊,都是一大堆啊,前端用node.js好像可以build下就不用管这些了. 但是我这直接上传到oschina这么一大堆,还是有点不爽有木有,好吧,等我想起来,我再干掉这家伙.