博客园新语言代码高亮以及OpenLiveWriter插件开发

参考:

新语言代码高亮及Windows Live Writer插件开发

最近学习Swift,在博客上写笔记的时候一直觉得Swift代码的高亮不太令人满意,因为博客园的编辑器上传代码模板中没有包括Swift在内的新语言。

偶然看到了上面这篇参考博文,为我提供了一些解决思路,决定一试。

1.HighLight.js

下载地址:https://highlightjs.org/

在下载页面选择自己需要适配的编程语言,然后下载得到一个压缩包,解压后内容如下:

highlight.pack.js中包含的对选择的语言的关键字、注释等等的高亮处理。

styles文件夹则包含了各种显示风格,包括github、AndroidStudio、Xcode等,以及其他很多风格。

将hightlight.pack.js文件和自己想要的style文件从后台上传文件到博客园。

然后进行博客设置,在页首html处加上以下代码:

<link rel="stylesheet" href="http://files.cnblogs.com/files/tt2015-sz/xcode.css">
<script src="http://files.cnblogs.com/files/tt2015-sz/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

把href和src改成自己的文件链接即可。

2.使用代码高亮效果

<div class="cnblogs_code">
<pre><code class="swift">
func backward(_ s1: String, _ s2: String) -&gt; Bool {
    return s1 &gt; s2
}
var reversedNames = names.sorted(isOrderedBefore: backward)
//reversedNames is equal to ["Ewa", "Daniella", "Chris", "Barry", "Alex"]<br /></code></pre>
</div>

新建一篇随笔,编辑HTML源代码,写入以上代码。保存,然后查看,便可看到下面的效果:

其中,

<div class="cnblogs_code">...</div>用来显示默认的博客园代码片段效果,有复制按钮,可以折叠等等。

<pre><code class="swift">...</code></pre>是highlight产生效果的片段,可以看到上面的效果与XCode风格一致。
在这里需要注明class,才能与对应的语言高亮效果匹配。

关于class详细,可以看这里:http://highlightjs.readthedocs.io/en/latest/css-classes-reference.html

3.插件开发

尽管上面的使用方法可以达到一定的效果,但是每次插入代码都要编辑HTML源码,添加<pre><code class="swift">...</code></pre>,也是比较麻烦。

后面考虑在OpenLiveWriter中添加插件。

时间: 2024-08-07 18:42:38

博客园新语言代码高亮以及OpenLiveWriter插件开发的相关文章

修改博客园markdown编辑器代码高亮风格的方法

???????作为一个工程师,追求极致与艺术也应当成为我们生活中的一部分,作为自己的心爱之物--博客,当然也得装扮一下,我对代码高亮有自己所喜欢的风格~还好程序员的世界总是共通的,已经有前辈开发了一些代码高亮的样式可供我们开箱即用.Highlightjs就是这样一款产品. ???????下面介绍一下我是如何将这款产品应用于博客园markdown编辑器中的. 第一步,找到你所喜欢的高亮主题 ???????打开Hightlightjs的demo页面 选择你所喜欢的高亮主题.我选择的是Atom One

我是博客园--新园丁

太有必要加入这声名远播的“高手集中营”了. 1.敢于决断--克服犹豫不定的习性 2.挑战弱点--彻底改变自己的缺陷 3.突破困境--从失败中撮成功的资本 4.抓住机遇--善于选择.善于创造 5.发挥强项--做自己最擅长的事情 6.调整心态--切忌让情绪伤害自己 7.立即行动--只说不做,徒劳无益 8.善于交往--巧妙利用人力资源 9.重新规划--站到更高的起点上 开篇,即以上九条必定加以借鉴! 我是博客园--新园丁

博客园设置类似sublime高亮代码

需要用到highlight.js,需要FQ,官网为https://highlightjs.org,首先官网的只有默认主题包,我们需要自定义主题包需要去它的github上找,地址为https://github.com/isagalaev/highlight.js,我用的主题是monokai-sublime.css 所以呢在github上把这个css文件给copy下来,然后把它的js文件也copy下来.上传文件到博客园,不要用官网的cdn,因为样式不能自定义,还要担心哪天地址不能用了 <link r

新语言代码高亮及Windows Live Writer插件开发

最近在博客园做一些学习笔记.一个是看apple的swift官方书,另外一个是随学校课堂(SICP)学习scheme. 这两种语言都谈不上普及(或者说swift太新).博客园原来的windows live writer代码高亮插件并不适用于这些语言. 于是我只好自己想办法.首先我找到了highlight.js这个js高亮插件.搜索到其官网.按照步骤部署在博客园即可. 需要注意的是,博客园我目前还没有发现如何添加外链. 从highlightjs下载的css和js都没有地方上传.所以我直接选择暴力将其

优化博客园的JS代码总结

为Markdown添加目录 这里我参考的是妙音天女的文章. 为文章添加版权信息 这里我参考的是呆尐兔兔的文章. 最后的代码 <script language="javascript" type="text/javascript"> function setCopyright(){ /* 设置版权信息,转载出处自动根据页面url生成 * window.location.href:读取当前url */ var info_str = '<p>本文为

博客园界面风格代码风格自定义设置

博客园设置界面风格 如何添加一个侧边栏导航 1.在自定义脚本里面添加如下js ## <script> function CreatePostNavigator() { // 目录标题的div var navigatorTitleDiv = '<div id="navigatorTitleDiv">隐藏目录</div>' // 目录所有内容的div var navigatorDivContent = '<div id="navigato

博客园“可运行&quot;代码

textarea <textarea style="width: 450; height: 300" id="theCode" title="双击运行代码" ondblclick="runCode('theCode');"> 这里放入运行的Html代码. </textarea><br /> <input onclick="runCode('theCode')" va

谁说博客园只能敲代码——还可以写心情

今天的新到货的 鞋子和毛衣好好看,就是裤子有些丑,白花我88元钱.鞋子是卡其色的马丁靴,相当fashion.毛衣也不错,尽显黑色成熟,很潮流,我喜欢.发型好好挑一挑,下回做个好看点的. 原文地址:https://www.cnblogs.com/rainyskywx/p/10134924.html

博客园Skin CSS代码 Version 3.0

/* Minification failed. Returning unminified contents. (187,73): run-time error CSS1036: Expected expression, found '#' */ body { background-color: #F5F5F5; } .clear { clear: both; } html { color: #000; overflow-y: scroll; background: #fff; } body, h