博客园代码高亮插件(类似csdn的代码插入)

博客园内置支持SyntaxHighlighter代码着色,使用此内置着色特性需要将博客的默认编辑器改为TinyMCE(“管理”-“选项”中设置)。如果使用CuteEditor,CuteEditor会自动去除代码中的空格,造成代码格式破坏。

如果您使用Windows Live Writer写博客(配置步骤),通过Windows Live Writer代码着色插件,可以方便进行SyntaxHighlighter代码着色。

我们推荐的代码着色插件是:Windows Live Writer Source Code plugin for SyntaxHighlighter

官方网址:http://sourcecodeplugin.codeplex.com/

本地下载:SourceCodePlugin_version_1.1.zip

安装方法:

将WindowsLiveWriter.SourceCode.dll复制到Windows Live Writer plugin文件夹:
* 32-bit systems: C:\Program Files\Windows Live\Writer\Plugins
* 64-bit systems: C:\Program Files (x86)\Windows Live\Writer\Plugins

一段经历:实际上我早在安装好Windows Live Writer后就已经安装了SyntaxHighlighter插件,但是一直没有用上,因为这款插件在本地Windows Live Writer编辑器中是没有效果的……(我以为没有作用)没文化,真可怕。直到近期我才发现这插件的作用是要发布到博客园后才有效果(因为他需要运行SyntaxHighlighter插件的js脚本)……下面我来说说为博客圆提供的这款可视化插件如何配置。

按照上面链接文章安装后,可通过Windows Live Writer的“插入”菜单使用,第一次使用此插件时会报读取不到配置文件,这个不影响程序使用,你只需点 Options 按钮在弹出框中配置完点OK就会创建该配置文件(如下图),保存在C:\Users\…\AppData\Roaming\Windows Live Writer\WindowsLiveWriter.SourceCode.config中(WindowsLiveWriter.SourceCode.config实际上是内部 PluginConfigurationData 对象的 XML序列化结果)。

根据上图数字标识顺序进行配置说明:

1. AutoLinks

publicboolAutoLinks { get; set; }

标识是否开启将代码中的超链接文字套上<a>标签,即可以直接点击链接。

2. Collapse

publicbool Collapse { get; set; }

标识是否在页面加载时默认将代码折叠起来,在博文中代码篇幅较大时此设置非常有用。

3. Gutter

publicbool Gutter { get; set; }

标识是否在代码前面显示行号

4. HtmlScript

publicboolHtmlScript { get; set; }

标识是否开启 HTML/XML 标签着色特性。(必须载入 xml 的笔刷 shBrushXml.js)

5. Light

publicbool Light { get; set; }

该属性用来控制是否开启轻量模式。开启轻量模式等同于,gutter: false 和 toolbar: false。

6. Ruler

publicbool Ruler { get; set; }

在代码上方增加一行用于标注代码所使用的列行数,博客园屏蔽了这个属性,也就是说如果你在博客园的文章中使用这个属性是没有任何效果的。

效果:

7. SmartTabs

publicboolSmartTabs { get; set; }

标识是否启动智能缩进,确保你的代码格式发布到网页显示后不会因空格或缩进造成变形。

8. Toolbar

publicbool Toolbar { get; set; }

该属性用来控制是否在代码块的右上角显示浮动工具栏。

9. LoadFromClipboard

publicboolLoadFromClipboard { get; set; }

标识在打开SyntaxHighlighter插件编辑框时,是否默认把剪贴板上得内容复制到编辑框中。

10. TabSize

publicintTabSize { get; set; }

自定义 Tab 的输入宽度。

11. ClassName

public string ClassName { get; set; }

将额外的css类添加到当前元素进行特殊样式展现。这个做为 style 属性的值,权级高,可覆盖如样式文件中定义的样式。

12. Brush

public string Brush { get; set; }

指定程序语言,以此来决定代码着色规则。Eg:C#、C++、CSS、JavaScript、Java、PHP、XML/HTML、VB、SQL、Python、Ruby、Delphi……(必须设置的特性值)

13. FirstLine

publicintFirstLine { get; set; }

指定行号的起始数值。

14. Highlight

public string Highlight { get; set; }

标记重要行,让它们高亮显示。多行之间用逗号“,”分割。

时间: 2024-12-28 05:34:51

博客园代码高亮插件(类似csdn的代码插入)的相关文章

博客园背景加入飘落雪花的js代码

<script type="text/javascript"> window.onload = function () { var minSize = 15; //最小字体 var maxSize = 30;//最大字体 var newOne = 900; //生成雪花间隔, 数值越小越快 var flakColor = "#1bd3ff"; //雪花颜色 var flak = $("<div></div>")

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

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

[转]7个高性能JavaScript代码高亮插件

对于喜欢写技术博客的同学来说,一定对代码高亮组件非常熟悉.一款优秀的JavaScript代码高亮插件,将会帮助你渲染任何一种编程语言,包括一些关键字的着色,以及每行代码的缩进等.今天我们要来分享一些高性能的JavaScript代码高亮插件,这些JavaScript代码高亮插件将非常有效地帮你实现在网页上的代码编辑和展示. 1.SyntaxHighlighter – 最优秀的JavaScript代码高亮插件 SyntaxHighlighter 是一款完全基于JavaScript的代码高亮插件,Sy

7个高性能JavaScript代码高亮插件

本文由码农网 – 小峰原创,转载请看清文末的转载要求,欢迎参与我们的付费投稿计划! 对于喜欢写技术博客的同学来说,一定对代码高亮组件非常熟悉.一款优秀的JavaScript代码高亮插件,将会帮助你渲染任何一种编程语言,包括一些关键字的着色,以及每行代码的缩进等.今天我们要来分享一些高性能的JavaScript代码高亮插件,这些JavaScript代码高亮插件将非常有效地帮你实现在网页上的代码编辑和展示. 1.SyntaxHighlighter – 最优秀的JavaScript代码高亮插件 Syn

如何在博客园没有js执行权限下执行js脚本

前言 小弟刚刚申请的这个博客园博客还比较年轻,没有js执行权限,但是我又想执行js脚本,只好动动歪脑筋. 先从博客园管理中的“页首Html代码”中填写script标签代码,发现保存直接被删除了,又测试了下iframe和frame标签,一样被删除了. 被删除,script标签没有被写入DOM: 解决方案-利用IMG标签的行内事件执行JS 虽然script被删,但是在随后的测试中发现可以添加图片标签. 代码: <img src="http://www.baidu.com/img/baidu_j

博客园背景音乐调用,通吃网易云音乐、虾米

单调的文字怎么行,让音乐为你的博文加点料.什么?你写的是技术型博客不搞这么多文艺,大叔,技术型博客也可以很文艺的诶. 今天下三分,网易云.虾米.所有的XX音乐各占据了国内的音乐市场,不过要论曲库哪家全,网易云虾米撕破脸.所以呢,要想博客加上稳定的音乐外链,就在这两者之间选择吧. 在网站上选择合适的背景音乐并外链 何为“合适的背景音乐”呢?首先是前奏不要太唐突,不然网友一打开你的博客就是“咚咚咚”的声音,撸管到一半犯心脏病怎么办?其次就是曲调柔和,柔和的曲调可以使听众最大化,因为大部分人对这种音乐

【转载】博客园背景音乐调用,让音乐为你的博文加点料

[转载]博客园背景音乐调用,让音乐为你的博文加点料 单调的文字怎么行,让音乐为你的博文加点料.什么?你写的是技术型博客不搞这么多文艺,大叔,技术型博客也可以很文艺的诶. 今天下三分,网易云.虾米.所有的XX音乐各占据了国内的音乐市场,不过要论曲库哪家全,网易云虾米撕破脸.所以呢,要想博客加上稳定的音乐外链,就在这两者之间选择吧. 在网站上选择合适的背景音乐并外链 何为“合适的背景音乐”呢?首先是前奏不要太唐突,不然网友一打开你的博客就是“咚咚咚”的声音,撸管到一半犯心脏病怎么办?其次就是曲调柔和

发现一个骗粉丝的人后发现博客园的一个bug

发现一个骗粉丝的人后发现博客园的一个bug 当你点开这篇文章的时候,如果你已经登录博客园账号,那么你自动回成为我的博客园粉丝,因为我加了自动关注的js,这里并不是想骗粉丝,希望博客园能重视这个bug(当然博客园肯定知道这个bug的).明天早上我会删除掉这段js的. 起因>发现一个骗粉丝的人 经过>他是如何实现骗粉丝的 我的一些思考 1.发现一个骗粉丝的人 今天下班,打开博客园的时候看到这篇文章,点了进去,感觉排版不错,自定义的界面体验非常不错,职业性地点击了主页看了看,发现了一个问题,于是乎有

博客园自定义地址栏logo

自定义博客园地址栏logo 一.首先自己需要下载一个logo图片,png.jpg格式的都可以 .挑选自己喜欢的图片就可以. 二.然后制作成icon图标  在线制作icon图标网站:http://www.bitbug.net/ 三.上传至博客园文件中 四.将以下代码复制到页脚Html中 <script type="text/javascript" language="javascript"> //Setting ico for cnblogs var li