markdown 代码本质

md 用代码块 来标记一段代码.其实就是给这些代码外部加上一两层标签而已.

所有md编辑器默认高亮都是用<pre><code></code></pre>块包裹的代码

rouge 代码高亮(jekyll 只支持这个!!!)

使用方法: 导入一个高亮css就可以.

rouge 支持好几种css. 本地安装 rouge. 然后导出你要的css 再把css 放入header就可以…

让 md 写法的话

~~~
<div id="lineLeft"> 
  <div class="lineFlex">
<div id="lineLeft-left">  </div>
  <div class="lineInDiv"> </div> 
<div id="lineLeft-right"> </div>
  </div>
</div>
~~~
{: .language-ruby}

rouge 修改背景颜色

.highlight {background-color:#272822;}

hoghlight 语法识别:

highlight 默认是根据 code标签上的class来识别语言的.

<pre><code class="java">...</code></pre>
<pre><code class="python">...</code></pre>
<pre><code class="ruby">...</code></pre>
<pre><code class="erlang">...</code></pre>

还可以禁止高亮 <pre>...</pre>

代码块标签组成: div → pre → code

div: class 是config 里的高亮名字 . highlight-wrap

pre 是多行 大段代码. code 是行内小段代码.

高亮的话. 在div 或者 pre 上添加class 就可以了. 这些class 在css 里定义 就能变成代码高亮了.

class的名字: highlight highlight-ruby

也许是 jekyll config 里面设置的.

代码高亮原理

其实高亮插件也就是JS查找HTML中特定的节点,并对特定节点赋予特定css,而css的结果也就是给代码上色; 所以纯粹说代码高亮的话就与Jekyll无关了,在这里要说的是Jekyll+MD文件+CODE 的方式。

极品高亮

v2 上提问 居然能遇到本人…. .. 他说用的 highlight 外加一 mac 的框..

https://www.w3ctrain.com/2016/08/18/why-am-i-use-sass/ 它网站禁用 js … 发现

上面一行…窗口没有了..

再看源码. 只剩下一个 class: highlight css
class: highlight js

所以漂亮的外壳是 JavaScript完成的…

主要就是 main.js 里面

highlight.js

highlight 官网

highlight.js 功能

支持44种 样式(也就说有44个css可以选择.) 多种编程语言提供代码高亮, 可以运行在 node.js 上… 支持各种标签. 与任何js框架兼容.

js文件是解析代码的!!! 也就是找出博客中的 代码. 进行处理.

highlight 使用

  1. js 文件 (唯一一个)

  2. css 文件 (44选一). “http://cdn.bootcss.com/highlight.js/8.0/styles/monokai_sublime.min.css” rel=”stylesheet”

  3. js 文件后面 添加: 这样才能 自动寻找 代码块.并完成高亮..

md 书写注意

`
这里写代码
`

虽然highlight.js 可以自动识别编程语言. 但是有错误机率.. 最好手动标记!!!

   `html
<DOCTYPE html>
<html>
</html>
`

highlight 支持71种 编程语言. c java js ruby html css…等等…