Rouge主题导出

Mac 安装 Rouge

$ gem install rouge

查看可用的高亮主题

$ rougify help style

usage: rougify style [<theme-name>] [<options>]

Print CSS styles for the given theme.  Extra options are
passed to the theme.  Theme defaults to thankful_eyes.

options:
  --scope       (default: .highlight) a css selector to scope by

available themes:
  base16, base16.dark, base16.monokai, base16.monokai.light, base16.solarized, base16.solarized.dark, colorful, github, molokai, monokai, monokai.sublime, thankful_eyes

导出喜欢的主题CSS文件

$ rougify style monokai.sublime > assets/css/syntax.css

CSS文件放入 head 标签

<link href="/assets/css/syntax.css" rel="stylesheet">

md文件 代码块前后加上高亮标签.

问题 高亮后 出现白色代码…

网页背景是浅色 加上 白色代码 根本看不清楚啊. 修复这个 需要对之前生成的 syntax.css 做一点小改动,加入一行 pre[class=’highlight’] {background-color:#000000;} 这样来设置 highlight 类的 <pre></pre> 标签的背景为黑色。

高亮测试 请看md源文件

写法1:

~~~
$container: (
  ".container": (
width: 100px 300px 600px 900px
  )
);
$grid: (
  ".third": (
width: 1 null 50% 1/3
  )
);
~~~

写法2:

上下各三个点: esc键下面那个. ` function test() { console.log(“notice the blank line before this function?”); } `

写法3:

	$container: (
	  ".container": (
	width: 100px 300px 600px 900px
	  )
	);
	$grid: (
	  ".third": (
	width: 1 null 50% 1/3
	  )
	);
	

Jekyll 3.0 以上默认只支持 Rouge

config配置文件:

highlighter: rouge
markdown: kramdown
kramdown:
  input: GFM
  syntax_highlighter: rouge

代码高亮实现方法

  1. 电脑本地先安装 rouge : gem install rouge
  2. 导出一个你最喜欢的css高亮文件: rougify style monokai.sublime > syntax.css
  3. 高亮css 链接 放到.. head里…

MD 高亮写法:

(http://oduizitoj.bkt.clouddn.com/2017-01-10-Screen%20Shot%202017-01-10%20at%2018.39.02.png)

代码高亮 参考网站

高亮

.md : Jekyll 代码高亮

首先 要是 代码块…

Ulysses:

源代码:

 ~
~~def show
~~  @widget = Widget(params[:id])
~~  respond_to do |format|
~~  format.html # show.html.erb
~~  format.json { render json: @widget }
~~  end
~~end
~~ ~
{: .language-ruby}

高亮效果

def show
 @widget = Widget(params[:id])
 respond_to do |format|
    format.html # show.html.erb
    format.json { render json: @widget }
 end
end