List of markdown - Baldanders.info
tag:Baldanders.info,2017-09-25:/tags
2017-09-25T22:57:09+09:00
バルトアンデルスは連続的な怪物,時間の怪物である。(ホルヘ・ルイス・ボルヘス 『幻獣辞典』より)
https://baldanders.info/images/avatar.jpg
https://baldanders.info/images/avatar.jpg
Chroma Syntax Highlighting
tag:Baldanders.info,2017-09-25:/hugo/chroma-syntax-highlighting/
2017-09-25T13:57:09+00:00
2017-09-25T13:57:09+00:00
今回のアップデートの目玉は純正 Golang 製の Chroma を組み込んで Syntax Highlight に対応したことだろう。
Spiegel
/profile/
<p><a href="https://gohugo.io/" title="The world’s fastest framework for building websites | Hugo">Hugo</a> 0.28 がリリースされた。</p>
<ul>
<li><a href="https://gohugo.io/news/0.28-relnotes/">Hugo | Hugo 0.28: High-speed Syntax Highlighting!</a></li>
</ul>
<p>今回のアップデートの目玉は <a href="https://golang.org/" title="The Go Programming Language">Golang</a> 製の <a href="https://github.com/alecthomas/chroma" title="alecthomas/chroma: A general purpose syntax highlighter in pure Go">Chroma</a> を組み込んで Syntax Highlight に対応したことだろう。
それまでは <a href="http://pygments.org/">Pygments</a> のようなツールを使うか <a href="https://highlightjs.org/">highlight.js</a> のようなスクリプトを噛ませるかだったのだが,ようやく <a href="https://gohugo.io/" title="The world’s fastest framework for building websites | Hugo">Hugo</a> が自前で用意できるようになった<sup id="fnref:1"><a href="#fn:1" class="footnote-ref" role="doc-noteref">1</a></sup>。</p>
<p>Syntax Highlight の設定方法については<a href="https://gohugo.io/documentation/" title="Hugo | Hugo Documentation">マニュアル</a>の以下のページが参考になる。</p>
<ul>
<li><a href="https://gohugo.io/content-management/syntax-highlighting/">Hugo | Syntax Highlighting</a></li>
</ul>
<h2 id="syntax-highlight-を有効にする">Syntax Highlight を有効にする</h2>
<p><a href="https://github.com/alecthomas/chroma" title="alecthomas/chroma: A general purpose syntax highlighter in pure Go">Chroma</a> Syntax Highlight を有効にするには設定ファイル(<code>config.toml</code> 等)で以下の項目を有効にすればよい。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-ini" data-lang="ini"><span class="line"><span class="cl"><span class="na">pygmentsUseClasses</span> <span class="o">=</span> <span class="s">true</span></span></span></code></pre></div>
<p>さらにハイライト表示の CSS ファイルを用意する。
これは <a href="https://gohugo.io/" title="The world’s fastest framework for building websites | Hugo">Hugo</a> コマンドで生成できる。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-text" data-lang="text"><span class="line"><span class="cl">$ hugo gen chromastyles --style=tango > chroma-styles.css
</span></span></code></pre></div><p>指定できる <code>style</code> の詳細は以下が参考になる。</p>
<ul>
<li><a href="https://help.farbox.com/pygments.html">Pygments style gallery!</a></li>
</ul>
<p>もちろん,生成した CSS ファイルは HTML の <code><head></code> 要素内で指定すること。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span> <span class="na">href</span><span class="o">=</span><span class="s">"/css/chroma-styles.css"</span><span class="p">></span>
</span></span></code></pre></div><h2 id="ハイライト表示">ハイライト表示</h2>
<p><a href="https://gohugo.io/" title="The world’s fastest framework for building websites | Hugo">Hugo</a> でハイライトを指定するには以下の <a href="https://gohugo.io/content-management/shortcodes/" title="Hugo | Shortcodes">shortcode</a> を使う。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-text" data-lang="text"><span class="line"><span class="cl">{{< highlight go >}}
</span></span><span class="line"><span class="cl">package main
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">import "fmt"
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">func main() {
</span></span><span class="line"><span class="cl"> fmt.Println("Hello, world!")
</span></span><span class="line"><span class="cl">}
</span></span><span class="line"><span class="cl">{{< /highlight >}}
</span></span></code></pre></div><p>実際の表示は以下の通り。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="kn">package</span> <span class="nx">main</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="kn">import</span> <span class="s">"fmt"</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="kd">func</span> <span class="nf">main</span><span class="p">()</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nx">fmt</span><span class="p">.</span><span class="nf">Println</span><span class="p">(</span><span class="s">"Hello, world!"</span><span class="p">)</span>
</span></span><span class="line"><span class="cl"><span class="p">}</span></span></span></code></pre></div>
<p>行番号を表示するには以下のように指定する</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-text" data-lang="text"><span class="line"><span class="cl">{{< highlight go "linenos=inline,linenostart=1" >}}
</span></span><span class="line"><span class="cl">package main
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">import "fmt"
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">func main() {
</span></span><span class="line"><span class="cl"> fmt.Println("Hello, world!")
</span></span><span class="line"><span class="cl">}
</span></span><span class="line"><span class="cl">{{< /highlight >}}
</span></span></code></pre></div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="ln">1</span><span class="cl"><span class="kn">package</span> <span class="nx">main</span>
</span></span><span class="line"><span class="ln">2</span><span class="cl">
</span></span><span class="line"><span class="ln">3</span><span class="cl"><span class="kn">import</span> <span class="s">"fmt"</span>
</span></span><span class="line"><span class="ln">4</span><span class="cl">
</span></span><span class="line"><span class="ln">5</span><span class="cl"><span class="kd">func</span> <span class="nf">main</span><span class="p">()</span> <span class="p">{</span>
</span></span><span class="line"><span class="ln">6</span><span class="cl"> <span class="nx">fmt</span><span class="p">.</span><span class="nf">Println</span><span class="p">(</span><span class="s">"Hello, world!"</span><span class="p">)</span>
</span></span><span class="line"><span class="ln">7</span><span class="cl"><span class="p">}</span></span></span></code></pre></div>
<p>特定の行を強調するには以下のように指定する。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-text" data-lang="text"><span class="line"><span class="cl">{{< highlight go "linenos=inline,linenostart=1,hl_lines=5-7" >}}
</span></span><span class="line"><span class="cl">package main
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">import "fmt"
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">func main() {
</span></span><span class="line"><span class="cl"> fmt.Println("Hello, world!")
</span></span><span class="line"><span class="cl">}
</span></span><span class="line"><span class="cl">{{< /highlight >}}
</span></span></code></pre></div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="ln">1</span><span class="cl"><span class="kn">package</span> <span class="nx">main</span>
</span></span><span class="line"><span class="ln">2</span><span class="cl">
</span></span><span class="line"><span class="ln">3</span><span class="cl"><span class="kn">import</span> <span class="s">"fmt"</span>
</span></span><span class="line"><span class="ln">4</span><span class="cl">
</span></span><span class="line hl"><span class="ln">5</span><span class="cl"><span class="kd">func</span> <span class="nf">main</span><span class="p">()</span> <span class="p">{</span>
</span></span><span class="line hl"><span class="ln">6</span><span class="cl"> <span class="nx">fmt</span><span class="p">.</span><span class="nf">Println</span><span class="p">(</span><span class="s">"Hello, world!"</span><span class="p">)</span>
</span></span><span class="line hl"><span class="ln">7</span><span class="cl"><span class="p">}</span></span></span></code></pre></div>
<p>一方,設定ファイルで <code>pygmentsCodeFences</code> を有効にすることで GitHub Flavored Markdown の Syntax Highlight も使えるようになる。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-text" data-lang="text"><span class="line"><span class="cl">```go
</span></span><span class="line"><span class="cl">package main
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">import "fmt"
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">func main() {
</span></span><span class="line"><span class="cl"> fmt.Println("Hello, world!")
</span></span><span class="line"><span class="cl">}
</span></span><span class="line"><span class="cl">```</span></span></code></pre></div>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="kn">package</span> <span class="nx">main</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="kn">import</span> <span class="s">"fmt"</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="kd">func</span> <span class="nf">main</span><span class="p">()</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nx">fmt</span><span class="p">.</span><span class="nf">Println</span><span class="p">(</span><span class="s">"Hello, world!"</span><span class="p">)</span>
</span></span><span class="line"><span class="cl"><span class="p">}</span>
</span></span></code></pre></div><div class="footnotes" role="doc-endnotes">
<hr>
<ol>
<li id="fn:1">
<p>いや,簡易的なものなら以前からあったのだが,吐き出すコードがイマイチで使う気にならなかったんだよねぇ。 <a href="#fnref:1" class="footnote-backref" role="doc-backlink">↩︎</a></p>
</li>
</ol>
</div>
Markdown 環境など
tag:Baldanders.info,2014-09-05:/blog/000732/
2014-09-05T09:00:00+00:00
2014-09-05T09:00:00+00:00
Markdown に対応したエディタが欲しいなぁ,と思って探してみた。
Spiegel
/profile/
<p> Markdown ファイル(*.md)に対応したエディタが欲しいなぁ,と思って探してみた。 </p><ul> <li><a href="http://hibara.org/software/markdownsharpeditor/">HIBARA.org - MarkDown#Editor</a></li> <li><a href="http://pad.haroopress.com/">Haroopad - The Next Document processor based on Markdown</a></li> </ul><p> 最初のが日本人で次が韓国人の作のようだ。 で,比べてみたけど,私には Haroopad のほうが「手に馴染む」感じ。 なので当面は君に決めた。 ただ,どちらも大量入力には向いてないんだよなぁ(私が Markdown に慣れてないってのもあるけど)。 なので MarkDown#Editor と同じ作者による <q><a href="http://hibara.org/software/hidemaru_highlight_markdown/">秀丸エディタ・Markdown記法強調表示定義ファイル</a></q>もゲット。 秀丸でスパスパスパっと入力して,細かい調整を Haroopad でやるってのがいい感じである。 </p><p> でツールを探してる時に面白いもの見つけた。 </p><ul> <li><a href="http://dynalon.github.io/mdwiki/">MDwiki - Markdown based wiki done 100% on the client via javascript</a></li> <li><a href="http://www.catch.jp/wiki/?MDwiki">MDwiki:MarkdownベースのシンプルCMS - catch.jp-wiki</a> (日本語の解説)</li> </ul><p> どうやら MDwiki を仕込んだディレクトリに Markdown ファイルを放り込むと HTML に展開して表示してくれるらしい。 でもこれ Wiki じゃないよね。 まぁ Git 等と組み合わせて認証済みの人たちと弄れるようにすれば Wiki ぽくできなくもないけど。 でも Wiki じゃないよね,これ。 </p><p> まぁでもしかし,面白そうなので<a href="https://baldanders.info/mdwiki/">うちでも導入</a>してみた。 メリットとしては </p><ol> <li>編集に関して Web インタフェースを持ってない(自前で作ることは可能だろうけど)ので spam の影響を受けない。</li> <li>JavaScript を使って内容をクライアントサイドのみで展開するので検索エンジンや各種アプリから見つけられにくい。 JavaScript を解釈する検索エンジンの場合は関係ないけど。 あと Markdown ファイル自体を(素のテキストとして)読むことはできるので,これはメリットとは言えないかも?</li> </ol><p> てぇところだろうか。 </p><p> まぁ(公開可能な)メモを置いておくには便利かもしれない。 Wiki は昔いくつか立ち上げてたけど,結局 spam にどう対処するかが運用のメインになってしまって止めてしまったんだよなぁ。 パスワード・ロックすれば spam は避けれるだろうけど,それじゃあ本来の利用者も面倒くさくなってしまうし。 個人サイトならこういう運用のほうがいっそシンプルでいいのかもしれない。 </p> <section> <h3>日本語組版処理の要件</h3> <p> てのが W3C にあると聞いてビックリだよ。 </p><ul> <li><a href="http://www.w3.org/TR/jlreq/">Requirements for Japanese Text Layout</a></li> <li><a href="http://www.w3.org/TR/jlreq/ja/">日本語組版処理の要件(日本語版)</a></li> </ul><p> これの凄いところはドキュメントがバイリンガルで提供されていること。 これ「日本語訳版」でも「英訳版」でもないんだよ。 末尾の用語集を見れば分かるけど,ちゃんと日本人とそれ以外の言語圏の人にも分かるように配慮されている。 こういう仕事の出来る人達って本当に凄いよね。 </p><p> 他の言語圏でも同じなのかもしれないけど,日本語の組版って一見シンプルなように見えて実は「例外」の嵐なんだよね。 で,今まではそういうのを「職人さん」がカバーしてきたわけだ。 でも本当はそれじゃダメなんだよ。 </p><p> <q><a href="http://www.w3.org/TR/jlreq/ja/">日本語組版処理の要件</a></q>は書籍等の組版を念頭に書かれている(だからこれが W3C で発行されていることに違和感を感じるんだけど)。 もちろんこれは重要な仕事で(JIS ハンドブックを見ればある程度は書かれているけど),まずはこれまで「人力」で躱していた「例外」を列挙していかないと先に進めない。 その上で「例外を減らすルールの改変」が必要なんだよ。 </p><p> 「例外」が多いというのはルールが間違っている証拠。 書籍等ならこれまでどおり力技で躱していけばいいのかもしれないけど, Web 上のコンテンツや電子文書はそうはいかない。 だって組版(typeseting)を行うのは「職人」じゃなくて「機械」なんだから。 </p><p> <q><a href="http://www.w3.org/TR/jlreq/ja/">日本語組版処理の要件</a></q>には </p> <figure> <blockquote> <q>この文書の解説では,組版処理の対象を主に書籍とする.執筆者の経験がその点に最も深いこともあるが,日本語組版処理において質の面から書籍の組版が重要と考えるからである.量が多いというだけでなく,質の面から見ると,書籍組版は多くの問題点を持っている.書籍組版は,その処理内容が多様であり,これらについて最も古くから多くの人々により問題点が考えられ,かつ指摘されてきた経緯がある. <br/>[...]<br/> しかし,使用頻度という点でいえば,雑誌,マニュアル,Web上の文書等の重要性は,書籍と変わらない.また,これらの文書の組版処理では,書籍とは異なる事項も含んでいる.これらにおける問題点は,次の課題としたい.</q> </blockquote> <figcaption><q><a href="http://www.w3.org/TR/jlreq/ja/">日本語組版処理の要件</a></q> 1章3節より</figcaption> </figure> <p> とあるので今後に期待したい。 </p> </section> <section> <h3>Sumatra PDF ってどうなってるの?</h3> <p> TeX 関連のサイトを回ると <a href="http://blog.kowalczyk.info/software/sumatrapdf/">Sumatra PDF</a> で云々という記述をわりと見かける。 いや,私も以前は使ってたんだけど,しばらく前から <a href="http://pdfreaders.org/">PDFreaders.org</a> のリストから外れちゃってるんだよね。 べつにメンテされてないってわけじゃないみたいだし,どうなってるの? </p><p> とりあえず今は <a href="https://wiki.gnome.org/Apps/Evince">Evince</a> 使ってるけど,これってフォントが埋め込まれてない PDF は思いっきり「トーフ」になるんだよねぇ。 私の昔の文書とか。 それもあって最近は PDF にちゃんとフォントを埋め込むようにしてるんだけどさ(PDF/A が標準になるならフォントが埋め込まれてない PDF はどんどん排除されていくんだろうけど)。 </p><p> でも気になる。 まじで <a href="http://blog.kowalczyk.info/software/sumatrapdf/">Sumatra PDF</a> ってどうなってるの? </p><p> というわけで, PDF の閲覧は「自由なソフト」を使いましょう。 Web で PDF 文書を配布してる人は Adobe のボタンじゃなくて,以下の<a href="http://pdfreaders.org/graphics.en.html">ボタンを貼り付ける</a>とよいでしょう。 </p><div style="margin:0 auto;text-align:center;"> <a href="http://pdfreaders.org/"><img src="http://pdfreaders.org/graphics/pdfreaders-four-freedoms.png" alt="pdfreaders.org"/></a> <a href="http://pdfreaders.org/"><img src="http://pdfreaders.org/graphics/pdfreaders-f-32px.png" alt="pdfreaders.org"/></a> </div> </section> <section> <h3>参考図書</h3> <div class="hreview"><a class="item url" href="https://www.amazon.co.jp/exec/obidos/ASIN/4501550201/baldandersinf-22/"><img src="https://images-fe.ssl-images-amazon.com/images/I/51Mpy7wvJlL._SL160_.jpg" alt="photo" class="photo"/></a><dl><dt class="fn"><a class="item url" href="https://www.amazon.co.jp/exec/obidos/ASIN/4501550201/baldandersinf-22/">W3C技術ノート 日本語組版処理の要件</a></dt><dd>W3C日本語組版タスクフォース </dd><dd>東京電機大学出版局 2012-04-10</dd></dl><p class="similar"><a href="https://www.amazon.co.jp/exec/obidos/ASIN/4568504112/baldandersinf-22/" target="_top"><img src="https://images-fe.ssl-images-amazon.com/images/P/4568504112.09._SCTHUMBZZZ_.jpg" alt="欧文組版 組版の基礎とマナー (タイポグラフィの基本BOOK)"/></a> <a href="https://www.amazon.co.jp/exec/obidos/ASIN/4839941033/baldandersinf-22/" target="_top"><img src="https://images-fe.ssl-images-amazon.com/images/P/4839941033.09._SCTHUMBZZZ_.jpg" alt="EPUB 3 スタンダード・デザインガイド"/></a> <a href="https://www.amazon.co.jp/exec/obidos/ASIN/4766124758/baldandersinf-22/" target="_top"><img src="https://images-fe.ssl-images-amazon.com/images/P/4766124758.09._SCTHUMBZZZ_.jpg" alt="TYPOGRAPHY(タイポグラフィ)03 デザイナーなら覚えておくべき 厳選フォント350"/></a> <a href="https://www.amazon.co.jp/exec/obidos/ASIN/4274066940/baldandersinf-22/" target="_top"><img src="https://images-fe.ssl-images-amazon.com/images/P/4274066940.09._SCTHUMBZZZ_.jpg" alt="アジャイルプラクティス 達人プログラマに学ぶ現場開発者の習慣"/></a> <a href="https://www.amazon.co.jp/exec/obidos/ASIN/4766124480/baldandersinf-22/" target="_top"><img src="https://images-fe.ssl-images-amazon.com/images/P/4766124480.09._SCTHUMBZZZ_.jpg" alt="世界の美しい欧文活字見本帳"/></a> </p> <p class="description">とりあえず高い!</p> <p class="gtools">reviewed by <a href="#me" class="reviewer">Spiegel</a> on <abbr class="dtreviewed" title="2014-09-05">2014/09/05</abbr> (powered by <a href="http://www.goodpic.com/mt/aws/index.html">G-Tools</a>)</p> </div> </section>