% 今すぐかけるMarkdown記法 +Pandoc用拡張i
% Wataru Ishizuka/Interio
% 2015-07-01


0 Pandoc

MarkDown 記法のドキュメントをhtmlなどへコンバートするには Pandoc が便利です。

download:https://github.com/jgm/pandoc/releases/tag/1.15.0.6

pandoc -o output.html --toc input.md

とすると output.html が作成されます。

--toc は見出し(index)自動作成
-o は出力先ファイル名

です。他にもいろいろ便利な指定があり好みの体裁にカスタマイズできます。

html 以外に .docx, .odt(LibreOffice Write), .tex(LaTex), .epub, など拡張子を自動判別してコンバートしてくれます。

詳しくは
guide:http://sky-y.github.io/site-pandoc-jp/users-guide/
demo:http://pandoc.org/demos.html

0.1 PDF

PDF出力するにはTeX 環境をインストールし、たとえば 

Ubuntu の場合

1) ソフトウェアセンターから LuaLaTex package for drawing spectral sequences. をインストール
2) $ sudo apt-get install -y  texlive-lang-japanese
3) $ sudo apt-get install -y  texlive-xetex
    $ pandoc input.md -o output.pdf -V documentclass=ltjarticle --latex-engine=lualatex

0.1.1 PDF の体裁

pandocの -H オプションで tex ファイルを指定して変更することが出来ます。

例)余白を小さくする

preamble.tex

\paperwidth210mm
\paperheight297mm
\usepackage{luatexja}
\usepackage[ipa]{luatexja-preset}
\usepackage{amsmath}
\usepackage{graphicx,color}
\usepackage[margin=2cm,truedimen]{geometry}
\def\baselinestretch{1.1}
\parindent=0pt

上記のファイルを作成し、pandocで指定して実行します。

    $ pandoc *.md -o tudo_pandoc.pdf -V documentclass=ltjarticle -H latex/preamble.tex --latex-engine=lualatex --toc

この文書で使っているファイル:

css: http://doc.interio-inc.com/pandoc/tuto_pandoc/css/github.css
tex: http://doc.interio-inc.com/pandoc/tuto_pandoc/latex/preamble.tex


1. Markdown記法

テキストエディターで以下の書き方で文書を書いて、pandoc でコンバートすると体裁がそろった文書が瞬時に作成できます。
体裁を気にせず書くことに集中でき、人に見せるときは必要に応じで html や docx など使い分けられ、時短&見える化に威力を発揮します。

主に、タイトル、見出し

見出しの書き方

    #見出し1
    ##見出し2
    ###見出し3

改行

    - 行末に2つ以上のスペースを入れるか  
    - 行末にバックスラッシュを入れる\

URL をそのままリンクにする時は

    <http://grkt.sakura.ne.jp/grkt/>

タイトル

ファイルの最初に行頭が%の時、タイトルとして扱われます。

% タイトルです

引用

    >引用
    >しています
    >よっと。

引用
しています
よっと。

強調強調

    *斜体*  
    **強調**  
    ~~打ち消し~~

斜体
強調
打ち消し

ドキュメントには上のように表示されます。

横罫線

* か – か _ を並べる。

    ***************************
or
    ------------------------------
or
    _______________________________

or

../../images/modules/pulls/dirty-shade.png")--------------------

or


list

リストの要素を記述するには "* "(*スペース)で始めます。
階層は " +", " -", (スペース4つと+, - )で表現します。

※このため、*\ (アスタリスク)1文字のときは\ (バックスラッシュ)を後ろにつける必要があります。

* 子
* 丑
* 寅
* 項目が複数行に渡る場合は
    行頭でスペースを4つ連続させるかタブを1つ入れる。
* 入れ子にする時は
    + 4つスペースを入れて + で始める
        - さらにネストする時は - で始める

ordering list

番号リストでは #. で自動ナンバリングしてくれます。

1. alpha
2. beta
3. gamma
    + 3.1 gamma-1
    + 3.2 gamma-2
        - 3.2.1 gamma-x
        - 3.2.2 gamma-y
#. delta
#. epsilon
  1. alpha
  2. beta
  3. gamma
  4. delta
  5. epsilon

Numbered example lists

~ > (@good) 良い子 > (@bad) 悪い子 > (@ordinary) 普通の子 > > そして、(@good) の名前は「よしお」~

(@good) 良い子

(@bad) 悪い子

(@ordinary) 普通の子

そして、(@good) の名前は「よしお」

リストの分離

#. Apple
#. IBM
#. NEC

<!-- comment -->

#. FUJITSU
#. SHARP
#. OKI

. Apple

. IBM

. NEC

. FUJITSU

. SHARP

. OKI

定義リスト

subject:
:    description

subject:
: description

画像

画像は”!”をつけると画像自体を表示、つけなければ画像のリンクを成します。

![キノコだよ]( ./image/noko.jpeg "image-title")
[キノコだよ]( ./image/noko.jpeg "image-title")

キノコだよ
キノコだよ

数式

$X=100*100$
$E=MC^2$

\(X=100*100\)
\(E=MC^2\)

テーブル

---: は右寄せ, :--- は左寄せ指定, :----: はセンタリング

TH  |      TH         |    TH     |
---:|:----------------|:---------:|
 0  |   Alpha         | aaaaaaaaa |
 1  |   Beata         | bb        |
 2  |   Gamma         | ccc       |
 3  |   Delta         | d         |
TH TH TH
0 Alpha aaaaaaaaa
1 Beata bb
2 Gamma ccc
3 Delta d

日本語では面倒な場合もありますが・・・・

コード

``` (バッククオートを3つ)で開始・終了した区間がコードハイライトになります。

code


    ```{.javaScript .numberLines startFrom="10000"}
        function func1{
            var a=1;
            var b=2;
            var c;
            c = a+b;
        }
    ```

rendering

10000
10001
10002
10003
10004
10005
10006
//javaScript
function func1{
    var a=1;
    var b=2;
    var c;
    c = a+b;
}

以下のように簡略に記述してもコードハイライトされます

    ```javaScript

以下のコードがシンタックスハイライト対応されています

actionscript, ada, apache, asn1, asp, awk, bash, bibtex, boo, c, changelog,
clojure, cmake, coffee, coldfusion, commonlisp, cpp, cs, css, curry, d,
diff, djangotemplate, doxygen, doxygenlua, dtd, eiffel, email, erlang,
fortran, fsharp, gnuassembler, go, haskell, haxe, html, ini, java, javadoc,
javascript, json, jsp, julia, latex, lex, literatecurry, literatehaskell,
lua, makefile, mandoc, markdown, matlab, maxima, metafont, mips, modelines,
modula2, modula3, monobasic, nasm, noweb, objectivec, objectivecpp, ocaml,
octave, pascal, perl, php, pike, postscript, prolog, python, r,
relaxngcompact, rhtml, roff, ruby, rust, scala, scheme, sci, sed, sgml, sql,
sqlmysql, sqlpostgresql, tcl, texinfo, verilog, vhdl, xml, xorg, xslt, xul,
yacc, yaml

応用編

include

例えば、こんなふうに複数のMarkdown ファイルがあるとき

01_preface.md
02_introduction.md
03_why_markdown_is_useful.md
04_limitations_of_markdown.md
05_conclusions.md

ファイルをワイルドカードで指定すると複数のファイルから生成することが出来ます。

    $ pandoc *.md -o all_page.html 

テンプレート機能

Pandoc変数

繰り返し


mermaid を使ってフローチャート

jsライブラリ
[mermaid]:http://knsv.github.io/mermaid/demos.html

(エディタ
[Haroopad]:http://pad.haroopress.com/

flowchart.js でフローチャート作図

flowchart.js を利用した作図表示。 html出力専用となります。

ライブラリの設置、テンプレートの改造が必要です

flow コードブロック内にフローチャートの内容を記述します。


    ```flow
    st=>start: Start
    op1=>operation: Operation1
    op2=>operation: Operation2
    ff1=>subroutine: Routine1
    cond=>condition: YesNo
    io1=>inputoutput: IO
    end=>end: End
    
    st->op1->op2->ff1->cond->end
    cond(yes,right)->io1->end
    cond(no)->end   
    ```
st=>start: Start
op1=>operation: Operation1
op2=>operation: Operation2
ff1=>subroutine: Routine1
cond=>condition: YesNo
io1=>inputoutput: IO
end=>end: End

st->op1->op2->ff1->cond->end
cond(yes,right)->io1->end
cond(no)->end   

書式:

alias=>[item_name]: display_name

item_name

id function
start 開始
operation 処理
condition 判断
subroutine 定義済み処理
inputoutput 入出力
end 終了

js-sequence-diagrams

書き方)

    ```sequence
    WEBサーバ->DBサーバ: データ挿入
    Note right of DBサーバ: DataBaseには\nユーザデータが\n格納される
    DBサーバ-->WEBサーバ: データ参照
    WEBサーバ->>DBサーバ: データ更新
flow
st=>start: Spreadsheets
e=>end: Most rows contain data that match models
55% Confidence
op1=>operation: Product A
sub1=>subroutine: Not Mapped
0% Confidence
cond=>condition: Mapped
or Not Mapped?
c2=>condition: >50% of Columns Mapped
or <50% of Columns Mapped sub2=>subroutine: <50% of Columns Mapped 15% Confidence c3=>condition: Mapping by Index
or Mapping by Non-Index
sub3=>subroutine: Mapping by Non-Index
25% Confidence
c4=>condition: Most rows contain data that match models
or Data fails models more than not
sub4=>subroutine: Data fails models more than not
5% Confidence
 
st->op1->cond(yes)->c2(yes)->c3(yes)->c4(yes)->e
cond(no)->sub1(right)
c2(no)->sub2(left)
c3(no)->sub3(left)
c4(no)->sub4(left)


便利なサービス

ブラウザで利用できる便利なMarkdown用サービスがたくさん夜に出ています。
使いやすかった2つをご紹介.
Markable を仕事用、 StackEdit は google drive を使ってプライベート用、という使い方もアリかも。

http://doc.interio-inc.com/pandoc/tuto_pandoc/tuto_pandoc.html

Markable.in

http://markable.in/

プレビューの同時表示ON/OFF、スクロール同期があり表示もシンプルで見やすいです。
メニュー等のUIはPCのメニューバーに準拠していてとっつきやすい操作性。
cloud連携は dropbox, evernote

markable.io

StackEdit

https://stackedit.io/

常にプレビューが表示されるマルチビューでメニューはワードのような装飾用ツールバーが丈夫にあるタイプ。
フローチャートにも対応しています。

cloud連携は dropbox, google-drive

StackEdit.io