手もとでGFMファイルをHTMLファイルに変換する簡単なRubyスクリプトgfm2html.rb

gfm2html.md

gfm2html.rb

手もとでGFM (GitHub Flavored Markdown) ファイルをHTMLファイルに変換する簡単なRubyスクリプトgfm2html.rbを下に置きました。 github-markdownを用いています。 google-code-prettifyを使えばsyntax highlightができることが特徴です。 簡単なCSSファイルを用意して使います。例としてstyle.cssが下に置いてあります。

この文章は Gist https://gist.github.com/t-nissie/c415b7da3a694e82d6b5 に置いてあります。 git clone https://gist.github.com/c415b7da3a694e82d6b5.git gfm2htmlでクローンできます。

使い方

$ gfm2html.rb --help
Usage: ./gfm2html.rb [options] [filename]
    -s, --style STYLESHEET_FILENAME  Specify stylesheet filename.
    -n, --name YOUR_NAME             Specify your name.
    -j JAVASCRIPT_FILENAME,          Specify JavaScript filename.
        --javascript
    -l, --language LANGUAGE          Specify natural language. Its defalt is 'en'.
    -r, --readme                     Readme mode.
    -g, --gfm                        GFM mode (default).
    -p, --plaintext                  Plaintext mode.
    -h, --help                       Show this message.
$ ./gfm2html.rb -l ja -n 'Takeshi Nishimatsu' -s style.css -j https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js gfm2html.md

別の方法

• 公式APIを使う。
  • gfm2html.sh
• 静的に（？）syntax highlight
• Firefox add-on GFM Viewer
• grip

Mac OS X上のEmacsとSafariでプレビューしながらGFMファイルを編集する方法

まず.emacsに

(load "markdown-mode")
(add-to-list 'auto-mode-alist '("\\.markdown\\'" . markdown-mode))
(add-to-list 'auto-mode-alist '("\\.md\\'" . gfm-mode))
(add-hook 'gfm-mode-hook
          (function (lambda ()
                  (local-set-key "\C-c\C-c\C-c" 'compile))))

などと書いておきます。 さらに次のようなMakefileを用意します。

# -*-Makefile-*-
##
all: gfm2html.html
%.html: %.md
	gfm2html.rb --readme -l ja -n 'Takeshi Nishimatsu' \
	-s style.css -j https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js $< > $@ && \
          osascript -e 'tell application "Safari"' -e 'do JavaScript "location.reload(true);" in document 1' -e 'end tell'
clean:
	rm -f *.html

例えばこのgfm2html.mdを編集しながらC-c C-c C-cしてCompile command: makeすると、GFM→HTMLの変換が成功すれば、Safariがリロードしてくれます。

ソフトウエアの再配布について

Copyright © 2015, 2017 Takeshi Nishimatsu

gfm2html.rb is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY. You can copy, modify and redistribute gfm2html.rb, but only under the conditions described in the GNU General Public License version 3 (the "GPLv3").

gfm2html.rb

#!/usr/bin/env ruby
# -*- coding: utf-8 -*-
# gfm2html.rb
# Time-stamp: <2017-02-23 05:15:28 takeshi>
# Copying:
#    Copyright © 2015, 2017 Takeshi Nishimatsu
#    gfm2html.rb is distributed in the hope that
#    it will be useful, but WITHOUT ANY WARRANTY.
#    You can copy, modify and redistribute gfm2html.rb,
#    but only under the conditions described in
#    the GNU General Public License version 3 (the "GPLv3").
##
require "rubygems"
require "github/markdown"
require "optparse"
require "date"
name = ENV['USER'] || ENV['LOGNAME'] || Etc.getlogin || Etc.getpwuid.name
language = "en"
stylesheets = []
javascripts = []
opts = OptionParser.new
opts.program_name = $0
mode = :gfm
opts.on("-s STYLESHEET_FILENAME","--style STYLESHEET_FILENAME",
        "Specify stylesheet filename."){|v| stylesheets << v}
opts.on("-n YOUR_NAME","--name YOUR_NAME","Specify your name."){|v| name=v}
opts.on("-j JAVASCRIPT_FILENAME","--javascript JAVASCRIPT_FILENAME",
        "Specify JavaScript filename."){|v| javascripts << v}
opts.on("-l LANGUAGE","--language LANGUAGE",String,
        "Specify natural language. Its defalt is 'en'."){|v| language=v[0..1].downcase}
opts.on("-r", "--readme",       "Readme mode (default)."){mode = :markdown}
opts.on("-g", "--gfm",             "GFM mode."){mode = :gfm}
opts.on("-p", "--plaintext", "Plaintext mode."){mode = :plaintext}
opts.on_tail("-h", "--help", "Show this message."){puts opts.to_s.sub(/options/,'options] [filename'); exit}
opts.parse!(ARGV)

title = ARGV[0]

body = GitHub::Markdown.to_html(ARGF.read,mode).gsub(/<pre lang="(.*)"><code>/,'<pre lang="\1"><code class="prettyprint">')

style_lines=""
stylesheets.each{|s| style_lines << "  <link rel=\"stylesheet\" href=\"#{s}\" type=\"text/css\" />\n"}

javascript_lines=""
javascripts.each{|j| javascript_lines << "  <script src=\"#{j}\" type=\"text/javascript\"></script>\n"}

STDOUT << "<!DOCTYPE html>
<html lang=\"#{language}\">
<head>
  <meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" />
  <title>#{title}</title>
  <meta name=\"author\" content=\"#{name}\" />
#{style_lines}#{javascript_lines}  <link rel=\"icon\" href=\"favicon.ico\" />
</head>
<body>
#{body}
<hr />
<address>Copyright &#169; #{Date.today.year} #{name}</address>
</body>
</html>
"
# Local variables:
#   compile-command: "./gfm2html.rb --readme -l ja -n 'Takeshi Nishimatsu' -s style.css -j https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js gfm2html.md | tee index.html"
# End:

style.css

/* -*-CSS-*-
 * style.css for README.html of feram
 * Time-stamp: <2017-02-23 04:54:20 takeshi>
 * Author: Takeshi NISHIMATSU
 */
body {
  color:       black;
  font-family: verdana, arial, helvetica, sans-serif;
}

h1, h2, h3, h4, h6 {
  font-family: verdana, arial, helvetica, sans-serif;
}

h1 {
  color:            #dd0000;
  background-color: #fff0f0;
  font-size:        240%;
}

h2 {
  border-top:       red 5px solid;
  border-bottom:    red 1px solid;
  padding-left:     8px;
  background-color: #fff0f0;
}

h3 {
  border-top:    red 2px solid;
  border-bottom: red 1px solid;
  padding-left:  4px;
}

h4 {
  border-top:    red 1px solid;
  padding-left:  4px;
  background-color: #fff0f0;
}

h5 {
  font-size:     larger;
  font-family:   courier, verdana, arial, helvetica, sans-serif;
  padding-top:   10px;
  color:         darkred;
}

code {
  font-size:     larger;
}

pre {
  font-family:      monospace, courier, verdana, arial, helvetica, sans-serif;
  padding-right:    0.5em;
  padding-left:     0.5em;
  padding-top:      0.1ex;
  padding-bottom:   0.1ex;
  margin-left:      0.5em;
  margin-right:     1.0em;
  white-space:      pre;
  color:            darkred;
  background-color: #f3f3f3;
}

p img {
    width: 60%;
    margin: auto;
    display: block;
}

div.figure div.figcaption {
    width: 60%;
    margin: auto;
    display: block;
}

div.navi {
 text-align: right;
 margin-right: 1.0em;
}

div.contents {
    margin-left: 10%;
}

img{
    width: 30%;
    margin: auto;
    margin-top:     3.0em;
    display: block;
}

figure figcaption{
    width: 60%;
    margin: auto;
    margin-bottom:     3.0em;
    display: block;
}


table{
    border-top: 1px solid;
    border-left: 1px solid;
    border-collapse: collapse;
    border-spacing: 0;
    empty-cells: show;
    text-align: center;
    margin: auto;
}

th{
    border-right: 1px solid;
    border-bottom: 1px solid;
    background-color: #fff0f0;
    padding: 0.3em 1em;
}

td{
    border-right: 1px solid;
    border-bottom: 1px solid;
    padding: 0.3em 1em;
}