MarkdownPad2使用代码高亮插件

MarkdownPad 2有插入代码块的功能,但样式却不尽人意,但又不想换个编辑器,找了挺多相关资料,最后在MarkdownPad 2集成prettify高亮插件。

如下相关资料:

[HTML] Prettify 代码高亮使用总结

Google Code Prettify,代码高亮的JS库

详解Google Code Prettify代码高亮Prettify.js库使用及其应用

prettify的bootcdn

prettify的github

你可以下载后引用,也可以直接引用bootcdn。

具体步骤:

1.打开MarkdownPad2

2.打开链接http://www.bootcdn.cn/prettify/ 分别复制这两个文件标签

3.在MarkdownPad2中的菜单中,点击【工具】——【选项】或者直接F7可以看到如下图

4.点击【高级】——【HTML Head编辑器】

5.分别将复制的引用的标签粘贴上去,并且加上片段代码,保存并关闭

6.现在加入代码块的要求

<pre class="prettyprint lang-javascript">
function getNowDate() {
    var date = new Date();
    var split = "-";
    var year = date.getFullYear();
    var month = date.getMonth() + 1;
    var strDate = date.getDate();
    if (month >= 1 && month <= 9) {
        month = "0" + month;
    }
    if (strDate >= 0 && strDate <= 9) {
        strDate = "0" + strDate;
    }
    var currentdate = year + split + month + split + strDate;
    return currentdate;
}
</pre> 

插入的代码必须放到

<pre class="prettyprit lang-指定样式">

</pre>

现在看下效果:

我们都知道MarkdownPad2是实时预览,跟浏览器是有区别的,我们按F6浏览器查看

或许这不是实时预览的效果,但我们没必要非得编辑的时候看到高亮效果,比如说我们每次去阅读自己的写md笔记,每次都得打开

MarkdownPad2来查看,我们把代码高亮配置好了,直接插入代码就行了,写完以后我们可以导出html,导出pdf是没有效果的,这里说下

因为我引用的是线上的链接,所以导出来的html要有网络才能看到高亮效果,如果没网络,可以下载下来,添加css和javascript

下面改下高亮主题:

打开github https://github.com/google/code-prettify/tree/master/styles

里面有多个主题,相关资料也有提到,这里我就直接用sunburst.css的主题样式

步骤如下:

1.按F7,点击【样式表】,添加sunburst.css,把样式粘贴,点击保存并关闭

/* Pretty printing styles. Used with prettify.js. */
/* Vim sunburst theme by David Leibovic */

pre .str, code .str { color: #65B042; } /* string  - green */
pre .kwd, code .kwd { color: #E28964; } /* keyword - dark pink */
pre .com, code .com { color: #AEAEAE; font-style: italic; } /* comment - gray */
pre .typ, code .typ { color: #89bdff; } /* type - light blue */
pre .lit, code .lit { color: #3387CC; } /* literal - blue */
pre .pun, code .pun { color: #fff; } /* punctuation - white */
pre .pln, code .pln { color: #fff; } /* plaintext - white */
pre .tag, code .tag { color: #89bdff; } /* html/xml tag    - light blue */
pre .atn, code .atn { color: #bdb76b; } /* html/xml attribute name  - khaki */
pre .atv, code .atv { color: #65B042; } /* html/xml attribute value - green */
pre .dec, code .dec { color: #3387CC; } /* decimal - blue rgb(47, 54, 64) */

pre.prettyprint, code.prettyprint {
    background-color: #000;
    border-radius: 8px;
}

pre.prettyprint {
    width: 95%;
    margin: 1em auto;
    padding: 1em;
    white-space: pre-wrap;
}

/* Specify class=linenums on a pre to get line numbering */
ol.linenums { margin-top: 0; margin-bottom: 0; color: #AEAEAE; } /* IE indents via margin-left */
li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8 { list-style-type: none }
/* Alternate shading for lines */
li.L1,li.L3,li.L5,li.L7,li.L9 { }

@media print {
  pre .str, code .str { color: #060; }
  pre .kwd, code .kwd { color: #006; font-weight: bold; }
  pre .com, code .com { color: #600; font-style: italic; }
  pre .typ, code .typ { color: #404; font-weight: bold; }
  pre .lit, code .lit { color: #044; }
  pre .pun, code .pun { color: #440; }
  pre .pln, code .pln { color: #000; }
  pre .tag, code .tag { color: #006; font-weight: bold; }
  pre .atn, code .atn { color: #404; }
  pre .atv, code .atv { color: #060; }
}

实时效果如下:

浏览器效果:

我们不能总是实时看到的代码块乌漆嘛黑,总得能看到代码嘛,所以改下样式
前面我们插入的主题样式代码

pre.prettyprint, code.prettyprint {
    background-color: #000;
    border-radius: 8px;
}把背景色#000改为:rgb(47, 54, 64),再看效果。

此次代码高亮只能改善下导出html能高亮(浏览器查看),至于其他能实时看到高亮效果的办法目前没有找到,其他md编辑器或许有实时高亮这里就不再累赘,喜欢用MarkdownPad2的朋友还是不错的,当然也可以自定义自己喜欢的高亮样式。
时间: 2024-08-07 07:42:35

MarkdownPad2使用代码高亮插件的相关文章

MarkdownPad2代码高亮插件兼容移动端样式

如果不知道MarkdownPad2使用代码高亮插件可以查看前一篇文章<MarkdownPad2使用代码高亮插件> 先看移动端效果图: 移动端点击查看效果 或者手机扫如下二维码: 我们经常阅读微信公众号文章的时候,常常看到文章内有高亮的代码,并且这代码不会换行,可以左右拖动滚动这样的效果对于我们阅读代码很方便也很舒服,上一篇文章使用高亮插件并不兼容移动端,经过简单的对高亮代码样式得修改,再通过markdownpad2导出html,这样我们就可以在移动端查看自己的代码笔记了.这个时候有人会纳闷我在

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

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

SyntaxHighlighter代码高亮插件

SyntaxHighlighter是Google Code上的一个开源项目,主要用于给网页上的代码着色, 使用十分方便,效果也不错,而且几乎支持常见的所有语言. 使用步骤: 一.下载并解压缩SyntaxHighlighter(http://download.csdn.net/detail/itmyhome/7757359)当前版本3.0.83 二.引入文件 将解压后的scripts和styles文件夹复制到项目中,在页面中引入shCore.js和核心CSS文件shCore.css 其次引入你要高

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

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

WordPress官方推荐的代码高亮插件

今天花了大半天的时间,终于选择好自己心仪的wordpress代码高亮插件,同时它也是wordpress官方推荐的代码语法高亮插件.在选择的过程中,我对比和试用了若干个代码高亮wordpress插件,包括有国人开发的wp-codebox.codecolorer.wp-syntax等,但这些插件不是很久没有更新和最新的wordpress不兼容导致安装不上,就是功能无法满足我的要求.直到我在wordpress官方网站支持文档里看到了我要的效果,以及在文章最后找到了wordpress推荐的代码高亮插件.

bootstrap设计网站中添加代码高亮插件

这款插件的名字叫做google-code-prettify 使用该插件之前的效果: 使用插件之后的效果: 接下来说步骤: (1)下载两个文件 http://codecloud.sinaapp.com/google-code-prettify/prettify.css http://codecloud.sinaapp.com/google-code-prettify/prettify.js (2)在head中引入这两个文件 <link href="google-code-prettify/p

代码高亮插件SyntaxHighlighter

一 第一 解压压缩包,scripts文件夹中包含了各种语言的JS文件,在styles文件夹中是各种显示高亮的主题 第二 如何使用?首先要引入其核心javascript文件shCore.js和核心CSS文件shCore.css,这两个是必选要引入的.其次引入你要高亮的语言JS,比如我想高亮显示的是C#,那么必须引入在scripts文件夹中的shBrushCSharp.js,最后引入高亮显示的主题CSS,默认的为shThemeDefault.css 第三 下面以高亮显示JavaScript代码为例讲

Word中使用代码高亮插件

Word中使用代码高亮插件 1.下载并安装:SyntaxHighlighter4Word.zip 解压,然后双击bin\word2010\Kong.SyntaxHighlighter.Word2010.vsto或bin\word2007\Kong.SyntaxHighlighter.Word2007.vsto,即可完成安装,当然前提是你装 了.net  framework 4.0. 2.在cnblogs个人设置主页设置代码颜色相间的风格. 页面定制CSS代码: #cnblogs_post_bod

google code-prettify 代码高亮插件使用方法

找代码高亮插件选了好久,还是这个使用起来比较方便. 先上链接:插件下载地址 官方使用方法地址 建议看官方的资料,我这里仅仅简要描述一下使用方法: 引入方法: 测试引入是否成功:herf 换成 自己放置的路径,打开测试网页源代码,点击css,js文件链接 能看到代码内容即OK. <link rel="stylesheet" type="text/css" href="prettify.css"> <script type=&quo