-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathJekyll-Markdown-Syntax-Highlighting.html
More file actions
283 lines (209 loc) · 15 KB
/
Jekyll-Markdown-Syntax-Highlighting.html
File metadata and controls
283 lines (209 loc) · 15 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
<!DOCTYPE html>
<html>
<head>
<!-- [[! Document Settings ]] -->
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!-- [[! Page Meta ]] -->
<title>Jekyll Markdown Syntax Highlighting</title>
<meta name="description" content="Make Today Better Than Yesterday - Code, Food, Photo and some Geek stuff ..." />
<meta name="HandheldFriendly" content="True" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="shortcut icon" href="/assets/images/favicon.ico" >
<!-- [[! Styles'n'Scripts ]] -->
<link rel="stylesheet" type="text/css" href="/assets/css/screen.css" />
<link rel="stylesheet" type="text/css"
href="//fonts.googleapis.com/css?family=Merriweather:300,700,700italic,300italic|Open+Sans:700,400" />
<link rel="stylesheet" type="text/css" href="/assets/css/syntax.css" />
<!-- [[! Ghost outputs important style and meta data with this tag ]] -->
<link rel="canonical" href="/" />
<meta name="referrer" content="origin" />
<link rel="next" href="/page2/" />
<meta property="og:site_name" content="Make Today Better Than Yesterday" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Make Today Better Than Yesterday" />
<meta property="og:description" content="Code, Food, Photo and some Geek stuff ..." />
<meta property="og:url" content="/" />
<meta property="og:image" content="/assets/images/cover1.jpg" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Make Today Better Than Yesterday" />
<meta name="twitter:description" content="Code, Food, Photo and some Geek stuff ..." />
<meta name="twitter:url" content="/" />
<meta name="twitter:image:src" content="/assets/images/cover1.jpg" />
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "Website",
"publisher": "Finding The Way Home",
"url": "/",
"image": "/assets/images/cover1.jpg",
"description": "Code, Food, Photo and some Geek stuff ..."
}
</script>
<meta name="generator" content="Jekyll 3.0.0" />
<link rel="alternate" type="application/rss+xml" title="Make Today Better Than Yesterday" href="/rss.xml" />
</head>
<body class="home-template nav-closed">
<div class="nav">
<h3 class="nav-title">Menu</h3>
<a href="#" class="nav-close">
<span class="hidden">Close</span>
</a>
<ul>
<li class="nav-home " role="presentation"><a href="/">Home</a></li>
<li class="nav-about " role="presentation"><a href="/about">About</a></li>
<li class="nav-photo " role="presentation"><a href="/tag/photo">Photo</a></li>
<li class="nav-food " role="presentation"><a href="/tag/food">Food</a></li>
<li class="nav-geek " role="presentation"><a href="/tag/geek">Geek</a></li>
<li class="nav-code " role="presentation"><a href="/tag/code">Code</a></li>
<li class="nav-author " role="presentation"><a href="/author/CT">Author</a></li>
</ul>
<a class="subscribe-button icon-feed" href="/rss.xml">Subscribe</a>
</div>
<span class="nav-cover"></span>
<div class="site-wrapper">
<!-- [[! Everything else gets inserted here ]] -->
<!-- < default -->
<!-- The comment above "< default" means - insert everything in this file into -->
<!-- the [body] of the default.hbs template, which contains our header/footer. -->
<!-- Everything inside the #post tags pulls data from the post -->
<!-- #post -->
<header class="main-header post-head " style="background-image: url(/assets/images/highlight.jpg) ">
<nav class="main-nav overlay clearfix">
<a class="blog-logo" href="/"><img src="/assets/images/ghost.png" alt="Blog Logo" /></a>
<a class="menu-button icon-menu" href="#"><span class="word">Menu</span></a>
</nav>
</header>
<main class="content" role="main">
<article class="post tag-code">
<header class="post-header">
<h1 class="post-title">Jekyll Markdown Syntax Highlighting</h1>
<section class="post-meta">
<!-- <a href='/'>Ching Tsai</a> -->
<time class="post-date" datetime="2016-03-07">07 Mar 2016</time>
<!-- [[tags prefix=" on "]] -->
on
<a href='/tag/code'>Code</a>
</section>
</header>
<section class="post-content">
<p>當初會被吸引來用 Jekyll 還來搭建這個 Blog ，其中一個很大的原因，也是因為內建的 Markdown expression 可以很方便的幫一些範例 Code 做美美的 Syntax Highlighting。不過 Highlighting 的 style 通常都被 Template 寫死在 css 裡。所以當我在用這個 Template 我就很樣把預設的 style 換掉，所以在做了一下 Serve 找到了修改的方法。</p>
<h3>Pygments</h3>
<p>首先 Jekyll 得標色其實是用一個 python 的 Syntax highlighter <a href="http://pygments.org/">Pygments</a> 所 gen 出來的，Pygments 其實非常強大，支援100多種語言並且輸出成各式各樣的格式，這裡我們是使用 <code>html</code>。 所以首先我們要先下載做新版本的 <a href="http://pygments.org/">Pygments</a> ， 並用 python 安裝。</p>
<p>The Syntax Highlighting style is actually extracted form a generic syntax highlighter written in python called <a href="http://pygments.org/">Pygments</a>. Pygments supports 300 languages and other text formats. For here, we are using the <code>html</code> style. First of all, download the latest version of <a href="http://pygments.org/">Pygments</a>, and install it with python.</p>
<div class="highlight"><pre><code class="language-python" data-lang="python"><span class="n">tar</span> <span class="n">xf</span> <span class="n">Pygments</span><span class="o">-</span><span class="mf">2.1</span><span class="o">.</span><span class="mf">3.</span><span class="n">tar</span><span class="o">.</span><span class="n">gz</span>
<span class="n">cd</span> <span class="n">Pygments</span><span class="o">-</span><span class="mf">2.1</span><span class="o">.</span><span class="mi">3</span>
<span class="n">sudo</span> <span class="n">python</span> <span class="n">setup</span><span class="o">.</span><span class="n">py</span> <span class="n">install</span>
</code></pre></div>
<h3>Configuration</h3>
<p>再來確認你的 <code>_config.yml</code> 當中的 <code>highlighter</code> 設為 <code>pygments</code></p>
<p>Make sure you set <code>highlighter</code> into <code>pygments</code> in your <code>_config.yml</code>.</p>
<div class="highlight"><pre><code class="language-python" data-lang="python"><span class="c"># Jykell configuration</span>
<span class="n">markdown</span><span class="p">:</span> <span class="n">redcarpet</span>
<span class="n">highlighter</span><span class="p">:</span> <span class="n">pygments</span>
<span class="o">...</span>
</code></pre></div>
<p>把你的路徑移到 Template 的 css 資料夾下 ， 以我的 Template 是在 <code>/assets/css</code> 你可以看到會有一個 <code>syntax.css</code> ，這個就是用來標色的 style 。</p>
<p>Change you directory to the css folder in your Template. In my case, it is located at <code>/assets/css</code>. You should find a <code>syntax.css</code> which denotes the syntax highlighting.</p>
<h3>Select Highlight Style</h3>
<p>此時你可以到 <a href="http://pygments.org/demo/3913075/">Pygments官網</a> 去選擇你喜歡的 style ， 這裡我使用 <code>monokai</code> 這個 style 。 最後下以下指令，把新的 syntax 套色導到 <code>syntax.css</code>。</p>
<p>At this point, you can pick your favorite color highlighting style <a href="http://pygments.org/demo/3913075/">here</a>. I am using style <code>monokai</code> in this demonstration. Finally, enter the scripts below to replace the <code>syntax.css</code>。</p>
<div class="highlight"><pre><code class="language-python" data-lang="python"><span class="n">pygmentize</span> <span class="o">-</span><span class="n">S</span> <span class="n">monokai</span> <span class="o">-</span><span class="n">f</span> <span class="n">html</span> <span class="o">></span> <span class="n">syntax</span><span class="o">.</span><span class="n">css</span>
</code></pre></div>
<h3>Background Color</h3>
<p>最後要注意的是，code block 底色的 css 並不是寫在 <code>syntax.css</code> 裡面，所以如果你是從白底套色改成黑底套色， 可能就會發現字都變不見了，所以只要手動修改 code block 底色就可以了，通常都是 <code>pre</code> 這個 class 的 <code>background-color</code> ， 以我的 Template 就在 <code>screen.css</code> 裡面。</p>
<p>Last but not least, if you change the style from a white background-color theme to a background-color theme, you will notice that the words are disappeared. This is because that the code block background-color is not denoted in the <code>syntax.css</code>. You should change it manually. It is usually denoted in <code>pre</code> css class. So I simply change the <code>pre</code> class <code>background-color</code> in <code>screen.css</code>.</p>
</section>
<footer class="post-footer">
<!-- Everything inside the #author tags pulls data from the author -->
<!-- #author-->
<figure class="author-image">
<a class="img" href="/author/CT" style="background-image: url(/assets/images/ct.png)"><span class="hidden">'s Picture</span></a>
</figure>
<section class="author">
<h4><a href="/author/CT">Ching Tsai</a></h4>
<p> 每天努力學習的研究攻城獅，略懂平行運算，分散式系統及機器學習，平時偶爾攝影，興趣是看 YouTube 學煮菜。</p>
<div class="author-meta">
<span class="author-location icon-location"> Hsinchu, Taiwan</span>
<span class="author-link icon-link"><a href="http://ChingTsai.github.io/chingtsai.github.io/"> ChingTsai.github.io/chingtsai.github.io/</a></span>
</div>
</section>
<!-- /author -->
<section class="share">
<h4>Share this post</h4>
<a class="icon-twitter" href="http://twitter.com/share?text=Jekyll Markdown Syntax Highlighting&url=http://ChingTsai.github.io/chingtsai.github.io/Jekyll-Markdown-Syntax-Highlighting"
onclick="window.open(this.href, 'twitter-share', 'width=550,height=235');return false;">
<span class="hidden">Twitter</span>
</a>
<a class="icon-facebook" href="https://www.facebook.com/sharer/sharer.php?u=http://ChingTsai.github.io/chingtsai.github.io/Jekyll-Markdown-Syntax-Highlighting"
onclick="window.open(this.href, 'facebook-share','width=580,height=296');return false;">
<span class="hidden">Facebook</span>
</a>
<a class="icon-google-plus" href="https://plus.google.com/share?url=http://ChingTsai.github.io/chingtsai.github.io/Jekyll-Markdown-Syntax-Highlighting"
onclick="window.open(this.href, 'google-plus-share', 'width=490,height=530');return false;">
<span class="hidden">Google+</span>
</a>
</section>
<!-- Add Disqus Comments -->
<div id="disqus_thread"></div>
<script type="text/javascript">
//var disqus_developer = 1;
/* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
var disqus_shortname = 'maketodaybetterthanyesterday'; // required: replace example with your forum shortname
var disqus_identifier = '/Jekyll-Markdown-Syntax-Highlighting';
var disqus_url = 'http://ChingTsai.github.io/chingtsai.github.io//Jekyll-Markdown-Syntax-Highlighting';
//console.log(disqus_shortname+" "+disqus_identifier+" "+disqus_url);
/* * * DON'T EDIT BELOW THIS LINE * * */
(function() {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = 'https://' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
</script>
<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
<a href="http://disqus.com" class="dsq-brlink">blog comments powered by <span class="logo-disqus">Disqus</span></a>
</div>
</footer>
</article>
</main>
<aside class="read-next">
<!-- [[! next_post ]] -->
<a class="read-next-story " style="background-image: url(/assets/images/cover_2.jpg)" href="/LeetCode-147-Insertion-Sort-List">
<section class="post">
<h2>LeetCode 147 : Insertion Sort List</h2>
<p>>Sort a linked list using insertion sort. ### Initial Though 這題很有意思， insertion sort 可能是大家最熟悉的 n^2...</p>
</section>
</a>
<!-- [[! /next_post ]] -->
<!-- [[! prev_post ]] -->
<a class="read-next-story prev " style="background-image: url(/assets/images/cover_2.jpg)" href="/LeetCode-46-Permutations">
<section class="post">
<h2>LeetCode 46 : Permutations</h2>
<p>Given a collection of distinct numbers, return all possible permutations. For example, [1,2,3] have the...</p>
</section>
</a>
<!-- [[! /prev_post ]] -->
</aside>
<!-- /post -->
<footer class="site-footer clearfix">
<section class="copyright"><a href="/">Make Today Better Than Yesterday</a> © 2016</section>
<section class="poweredby">Proudly published with <a href="https://jekyllrb.com/">Jekyll</a> using <a href="https://github.com/biomadeira/jasper">Jasper</a></section>
</footer>
</div>
<!-- [[! Ghost outputs important scripts and data with this tag ]] -->
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<!-- [[! The main JavaScript file for Casper ]] -->
<script type="text/javascript" src="/assets/js/jquery.fitvids.js"></script>
<script type="text/javascript" src="/assets/js/index.js"></script>
<!-- Add Google Analytics -->
<!-- Google Analytics Tracking code -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', '', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>