17
17

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Github Flavored Markdownをemacs上で書いて, emacsからtumblrにポストする.

Last updated at Posted at 2012-12-26

garaemon's blogからの転載

Qiitaがあまりに素晴らしいサービスだったので, 触発されて
自分好みのメモ+ブログ環境を構築しました.

やりたいことは

  • emacs上でひとつのファイルにGithub Flavored Markdown(GFM)でメモを取る. 検索しやすい
  • syntax highlightつきでローカルのブラウザでそのメモを見る
  • 有用そうなものがあれば, コピペでemacsからtumblrにポスト

です

必要な物は,

  • emacs上でGFMを編集するemacs lisp
  • GFMをローカルでhtmlに変換するスクリプト
  • tumblrの記事をemacsで書くemacs lisp

となります.

gfm-mode

markdown-modeを使いましょう.

git clone git://jblevins.org/git/markdown-mode.git

.emacsに

(load "path-to-markdown-mode/markdown-mode/markdown-mode.el")
(setq auto-mode-alist (cons '("\\.md" . gfm-mode) auto-mode-alist))

これでemacsでgfmを書くのは解決.

GFMをhtmlに変換

gh-markdown-cli
を利用します.

gh-markdown-cliはコマンドラインから, GFMで書かれたファイルをhtmlに変換してくれます.

ですがgh-markdown-cliはsyntax highlightが効かないので, パッチをあてて, pygmentsを走らせます.

pygments-style-github
というのがあるのでこれを使いましょう. githubなcssが提供されます.

git clone git://github.com/hugomaiavieira/pygments-style-github.git
cd pygments-style-github
(sudo) python setup.py install

次にパッチの当たっているgh-markdown-cliをダウンロード.
かなり適当です. pugmentsないと動きません.

git clone git://github.com/garaemon/gh-markdown-cli.git
cd gh-markdown-cli
npm install

同期的に外部プロセスを呼びたいがためにffiとか使っちゃってるのは残念ですが.
まさに牛刀

gh-markdown-cli/bin/mdownを使うことで, GFMをsyntax highlight付きの
htmlがゲットできるようにになりました.

適当なところにcssを作ります

pygmentize -S github -f html > github.css

ここでgfm-modeのために.emacsを編集しましょう. cssとかは適当についかしchai maxx.

(setq markdown-command "path-to-gh-markdown-cli/gh-markdown-cli/bin/mdown")
(setq markdown-xhtml-header-content "
<link rel=\"stylesheet\" type=\"text/css\" media=\"all\" 
href=\"path-to-github.css/github.css\" />
")

これでGFMで編集している時にC-c C-c pでブラウザで出力が見られるようになったはずです.

tumblrにぶっこむ, emacsからhtmlを!

tumblr-modeを利用します.

が, これはtumblrのマークダウンを使うか, htmlを直接書くかしかできないので
パッチを当ててあげます.

git clone git://github.com/garaemon/tumblr-mode

これまたかなり適当なパッチなので注意してください.

.emacsに

(add-to-list 'load-path "path-to-tumblr-mode/tumblr-mode")
(require 'tumblr-mode)
(custom-set-variables '(tumblr-post-format "html"))

このtumblr-modeは本文をGFMだと無理やり解釈して, htmlに変換して, そのhtmlを
tumblrに投稿します. tumblrをカスタマイズして先ほどのgithub.cssは読み込んでおきましょう.
M-x tumblr-new-post, M-x tumblr-save-postで投稿です.

以上です. ちなみにこのtumblrのcssとかは
garaemon-tumblr-theme
においてます. ここのgh-pagesブランチにおいて, そのcssをtumblrから読んであげています.

gh-pagesでないとMIMEがtext/plainになってしまうのでこうしています.

よいemacs+tumblrライフを!

17
17
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
17
17

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?