2016年3月12日土曜日

Gistのコード埋め込みを試す

今更GistのsnipetをBloggerのポストに埋め込む方法を知ったので、ちょっとテスト。

なるほど。

2016年2月18日木曜日

cabal installでインストールしたものの行先

単なるメモ。Windows版Haskell Platformで、cabal installでインストールしたものの行先。
  • パッケージ: %USERPROFILE%\AppData\Roaming\cabal\packages
  • 実行ファイル: %USERPROFILE%\AppData\Roaming\cabal\bin
確認したバージョンはHaskell Platform 7.10.3

2015年5月8日金曜日

BloggerにMathJaxを導入する

動機

Bloggerで数式を表示できるようにしたい。

手順

How to use LaTeX on blogspot?を参考にした。以下、念のためコピペしておく。

テンプレートの「HTMLで編集」で、下記のコードを<head>要素の中に追加する。

<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js">
MathJax.Hub.Config({
 extensions: ["tex2jax.js","TeX/AMSmath.js","TeX/AMSsymbols.js"],
 jax: ["input/TeX", "output/HTML-CSS"],
 tex2jax: {
     inlineMath: [ ['$','$'], ["\\(","\\)"] ],
     displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
 },
 "HTML-CSS": { availableFonts: ["TeX"] }
});
</script> 

試してみる

単位円の方程式: 
フーリエ変換と逆変換:

Markdownエディタを選ぶ

概要

初めてブログというのものを書いてみて、ブラウザのエディットボックスでHTMLを編集するのは大変辛いということを実感したので、Markdownエディタというものをいろいろ試してみることにした。今のところ私のニーズに合いそうなのはStackEditHaroopadである。

StackEdit

StackEditはたくさんあるブラウザ上で動作するMarkdownエディタの中でも有名どころのようだ。Bloggerに直接ファイルをpublishできるのが便利。そのほか、Syntax Highlight付きfenced code block、 形式による数式の編集と表示、Google DriveやDropboxへのエクスポートなど、Markdownエディタに期待される機能はあらかたそろっている。作成したファイル自体はローカルに保存され、ネットワークに勝手に出て行ったりしないようなので、仕事でも使えるかもしれない。ひとまずこれで良いんじゃないかという気もする。

Haroopad

仕事だとどうしてもWindowsを使わざるを得ないのだが、Windowsのデスクトップアプリで良い感じのMarkdownエディタは数が少ないようだ。見つけた範囲ではHaroopadの完成度が頭一つ抜けているように感じた。デフォルトでもかなり日本語化が進んでいて助かる。Mac用の高機能Markdownエディタにありそうな機能はあらかたそろっており、とても気に入った。細かいことではあるが、私のようなMarkdown初心者にはMarkdownのヘルプを常に表示しておける機能は大変ありがたい。現時点の最新版(0.13.1)だと数式の編集周りの挙動がちょっと不安定な感じがするので今後の修正を期待する。

2015年5月6日水曜日

Bloggerへのhighlight.jsの導入

Syntax Highlighterの選択

Bloggerでブログを始めるにあたって、プログラムのソースコードを色付けして表示する機能(syntax highlighter)を使えるようにしたいと考えた。調査した範囲では、Bloggerに組み込めそうなsyntax highlighterは以下の3つだった。

  1. highlight.js
  2. Syntax Highlighter
  3. google/code-prettify

結論から言うと、対応言語とスキンの種類の豊富さから、今回は1を選んだ。特にHaskell対応とVisual Studio風スキンが気に入った。以下は2,3に関するコメント。

  • 2は老舗で多機能のようだが、Haskellが対応言語のリストに含まれていない。また、公式hosted versionを利用したBloggerへの組み込み手順を実施してもSyntax Highlightingが動作しなかった(原因はあまり真剣に追求していないので単にどこかで間違えたのかもしれない)。Githubで次期バージョンが開発中のようなのでもう少ししたらまたのぞいてみたい。
  • 3は長期にわたって更新が停止している。Haskellにも対応しているが、skinの選択肢が少なく、その中に気に入るものがなかった。

highlight.jsをBloggerに組み込む

  1. Custom Packageの取得
  2. highlight.jsの公式hosted versionではHaskellに対応していないので、自前でなんとかする。まずダウンロードページでサポートしたい言語にチェックを入れ(不要な言語からはチェックを外し)、downloadボタンをクリックすると、所望の言語に対応したCustom Package (highlight.zip)を入手できる。

  3. Custom PackageをGithubにpush
  4. Github上に適当なリポジトリ(例: userid/highlightjs_cp)を作成し、入手したhighlight.zipの中身をそのままpushする。

    
    unzip -d highlight highlight.zip
    cd highlight
    git init
    git add .
    git commit -m 'highlight.js custom package'
    git remote add origin https://github.com/userid/highlightjs_cp.git
    git push origin master
    
    
    
  5. RawGitでGithub上のファイルのURLを取得
  6. pushしたファイルのうち、highlight.pack.jsおよびstyleディレクトリ配下の自分の好きなスキンのファイル(例: style/vs.css)へのURLをRawGitで取得する。rawgit.com経由にするかCDN経由にするかは予想されるトラフィック次第だが、書いた本人しか見ないような個人ブログならrawgit.comで十分と判断する。ここでは以下の通りURLが取得できたとする。

    https://rawgit.com/userid/highlitejs_cp/master/highlight.pack.js
    https://rawgit.com/userid/highlitejs_cp/master/styles/vs.css
    
  7. Bloggerテンプレートへの埋め込み
  8. How to use highlight.jsの冒頭にある3行のURLを上記のもので置き換える。
    <link rel="stylesheet" href="https://rawgit.com/userid/highlitejs_cp/master/styles/vs.css"/>
    <script src="https://rawgit.com/userid/highlitejs_cp/master/highlight.pack.js"></script>
    <script>hljs.initHighlightingOnLoad();</script>
    
    
  9. BloggerのテンプレートHTML編集画面を開き、head要素の最後のあたりに上記3行を追記、保存する。

使ってみる その1(C言語)

"<"記号はエスケープが必要であることに注意する。

  • HTMLソース
  • <pre><code class="cpp">
    #include &lt;stdio.h>
    int main(int argc, char** argv) {
      printf("Hello, world!\n");
      return 0;
    }
    </code></pre>
    
    
  • 出力
  • #include <stdio.h>
    int main(int argc, char** argv) {
      printf("Hello, world!\n");
      return 0;
    }
    
    

使ってみる その2(Haskell)

  • HTMLソース
  • <pre><code class="haskell">
    import Control.Monad
    import Data.Char
    main = forever $ do
      l &lt;- getLine
      putStrLn $ map toUpper l
    </code></pre>
    
  • 出力
  • import Control.Monad
    import Data.Char
    main = forever $ do
      l <- getLine
      putStrLn $ map toUpper l