markdown_catch_1280

こんにちは。kei(@boot_kt)です。

Markdownを書くのにどんなツールを使っていますか?
Markdown専用エディタもありますが、Markdownのためだけにツールを切り替えるのって面倒じゃないですか?
(もちろん専用ツールだと便利な機能があるので使う意味はありますけど)

もしあなたがVisual Studio Codeを使っているのであればそのままVisual Studio CodeでMarkdownを書くことをオススメします。

この記事の概要

  • エディタ:Visual Studio Code Ver.1.5.3
  • 拡張機能:Markdown PDF、vscode-pandoc
  • OS:Windows7
  • 基本的なMarkdown記法の一覧
  • 基本的なMarkdown記法の一覧をPDFにしたチートシート
  • Visual Studio CodeでMarkdownのプレビューを見る
  • Visual Studio Codeでmdファイルをpdfファイルに変換
  • Visual Studio Codeでmdファイルをhtmlファイルに変換
  • Visual Studio CodeでmdファイルをWordのdocxファイルに変換
  • 既存のmdファイルを一気にpdf/html/docxファイルに変換
    ※mdファイルはMarkdownを書いたファイルです
Mac版の記事は後日書きますが、この記事でも参考になると思います。
OS依存する部分は少しですし、読み替えるのが可能なはずです。

 




Markdownってなんですかー?

Markdown(マークダウン)をご存知ですか?

GitHubやQiitaでも採用されている記法です。
 

Wikipediaにはこんな風に書いています。

Markdown(マークダウン)は、文書を記述するための軽量マークアップ言語のひとつである。
本来はプレーンテキスト形式で手軽に書いた文書からHTMLを生成するために開発されたものである。
しかし、現在ではHTMLのほかパワーポイント形式やLATEX形式のファイルへ変換するソフトウェア(コンバータ)も開発されている。
各コンバータの開発者によって多様な拡張が施されるため、各種の方言が存在する。

引用:Wikipedia – Markdown

なんかよく分からないので、超簡単に言ってしまうと・・・・

 


HTMLタグを書くのが面倒
代わりに * とか # とかの記号を1-2文字程度書くだけでHTMLタグを使ったようにエエ感じできれいに表示してくれる記法

 

って感じかな。

 

Markdown記法のチートシート

次項の内容をPDF化したものを以下からダウンロードできます。
良かったら、チートシートとしてご利用ください。

MarkdownCheatsheet_Ver.1.0

Markdown記法のSyntax(構文・書き方)

Markdownの基本的な構文は以下をご覧ください。

 

Markdown記法の命令(?)の数は僅かなので、すぐに覚えられるでしょう。
しかし注意するべき事があります。
以下の注意事項をよく読んでおいてください。

注意事項

  • Markdownはツール・サービスによって書き方が違う場合があります
  • Markdownはツール・サービスによって表示のされ方が違う場合があります
  • MarkdownをHTMLに変換した場合、見え方が違う場合があります
  • MarkdownをHTMLに変換した結果はツール・サービスによって違う場合があります
  • Markdownはツール・サービスによって拡張されている事があります
  • Markdownはツール・サービスによって仕様が違う場合があります
  • Markdownは空行や半角スペースの有無、その数によって表示結果が変わります

 

以降、Markdown記法を列挙しますが、MarkdownとそれをHTMLへ変換した場合のものを並べて書いておきます。
Visual Studio Codeではどのような表示になるか、出力されたHTMLはどうなるか、実際に動かしながら参照すると良いでしょう。

Block Elements(ブロック要素)

Paragraphs and Line Breaks(段落と改行)

Name Markdown HTML
改行
※△は半角空白
Hogehoge△△
Fugafuga
<p>Hogehoge<br />
Fugafuga</p>
段落 Hogehoge
Fugafuga
<p>Hogehoge</p>
<p>Fugafuga</p>
段落 Hogehoge

Fugafuga

<p>Hogehoge</p>
<p>Fugafuga</p>

Headers(ヘッダ)

Name Markdown HTML
見出し1 # Hogehoge <h1>Hogehoge</h1>
見出し2 ## Hogehoge <h2>Hogehoge</h2>
見出し3 ### Hogehoge <h3>Hogehoge</h3>
見出し4 #### Hogehoge <h4>Hogehoge</h4>
見出し5 ##### Hogehoge <h5>Hogehoge</h5>
見出し6 ###### Hogehoge <h6>Hogehoge</h6>

Blockquotes(ブロック引用符)

Name Markdown HTML
引用符 > Hogehoge

> Fugafuga

<blockquote>
<p>Hogehoge</p>
</blockquote>
<blockquote>
<p>Fugafuga</p>
</blockquote>
引用符 > Hogehoge
>
> Fugafuga
<blockquote>
<p>Hogehoge</p>
<p>Fugafuga</p>
</blockquote>
引用符 > Hogehoge
Fugafuga
Bugobugo
Gabogabo
<blockquote>
<p>Hogehoge Fugafuga Bugobugo Gabogabo</p>
</blockquote>
引用符
入れ子
> Hogehoge
> > Fugafuga
> > > Bugobugo
> Gabogabo
<blockquote>
<p>Hogehoge > Fugafuga > > Bugobugo Gabogabo</p>
</blockquote>
引用符
こういう書き方もできます
> # Hogehoge
> Fugafuga
> ## Bugobugo
> Gabogabo
<blockquote>
<h1 id=”hogehoge”>Hogehoge</h1>
<p>Fugafuga ## Bugobugo Gabogabo</p>
</blockquote>

Lists(リスト・箇条書き)

Name Markdown HTML
リスト * Hogehoge
* Fugafuga
* Bugobugo
<ul>
<li>Hogehoge</li>
<li>Fugafuga</li>
<li>Bugobugo</li>
</ul>
リスト + Hogehoge
+ Fugafuga
+ Bugobugo
<ul>
<li>Hogehoge</li>
<li>Fugafuga</li>
<li>Bugobugo</li>
</ul>
リスト – Hogehoge
– Fugafuga
– Bugobugo
<ul>
<li>Hogehoge</li>
<li>Fugafuga</li>
<li>Bugobugo</li>
</ul>
番号リスト 1. Hogehoge
2. Fugafuga
3. Bugobugo
<ol style=”list-style-type: decimal”>
<li>Hogehoge</li>
<li>Fugafuga</li>
<li>Bugobugo</li>
</ol>
番号リスト 5. Hogehoge
2. Fugafuga
9. Bugobugo
<ol start=”5″ style=”list-style-type: decimal”>
<li>Hogehoge</li>
<li>Fugafuga</li>
<li>Bugobugo</li>
</ol>
リスト * Hogehoge
Fugafuga
Bugobugo
Gabogabo
* Hogehoge2
Fugafuga2
Bugobugo2
Gabogabo2
<ul>
<li>Hogehoge Fugafuga Bugobugo Gabogabo</li>
<li>Hogehoge2 Fugafuga2 Bugobugo2 Gabogabo2</li>
</ul>
リスト * Hogehoge
Fugafuga
Bugobugo
Gabogabo
* Hogehoge2
Fugafuga2
Bugobugo2
Gabogabo2
<ul>
<li>Hogehoge Fugafuga Bugobugo Gabogabo</li>
<li>Hogehoge2 Fugafuga2 Bugobugo2 Gabogabo2</li>
</ul>
リスト内引用符 * Hogehoge

> Fugafuga
> Bugobugo

<ul>
<li>Hogehoge</li>
</ul>
<blockquote>
<p>Fugafuga Bugobugo</p>
</blockquote>
リスト内引用符
※間違いパターン
* Hogehoge
> Fugafuga
> Bugobugo
<ul>
<li>Hogehoge > Fugafuga > Bugobugo</li>
</ul>
リスト内コード * Hogehoge

code goes here
code goes here
code goes here
code goes here

※半角空白x8 or TABx2

<ul>
<li><p>Hogehoge</p>
<pre><code>code goes here
code goes here
code goes here
code goes here</code></pre></li>
</ul>

Code Blocks(コードブロック)

Name Markdown HTML
Codeタグ Hogehoge

Fugafuga
Bugobugo
Gabogabo

※半角空白x4 or TABx1
※HogehogeとFugafugaの間は空白行

<p>Hogehoge</p>
<pre><code>Fugafuga
Bugobugo
Gabogabo</code></pre>

Horizontal Rules(水平線)

Name Markdown HTML
水平線 * * * <hr />
水平線 *** <hr />
水平線 **** <hr />
水平線 ***** <hr />
水平線 – – – <hr />
水平線 <hr />
水平線 —- <hr />

Span Elements(スパン要素)

Links(リンク)

Name Markdown HTML
リンク This is [an example](http://yahoo.co.jp/ “Title”) inline link. <p>This is <a href=”http://yahoo.co.jp/” title=”Title”>an example</a> inline link.</p>
リンク [This link](http://yahoo.co.jp/) has no title attribute. <p><a href=”http://yahoo.co.jp/”>This link</a> has no title attribute.</p>
リンク
※””でも、”でも、()でもOKです。
This is [an example][id] reference-style link.

[id]: http://yahoo.co.jp/ “Optional Title Here”
<p>This is <a href=”http://yahoo.co.jp/” title=”Optional Title Here”>an example</a> reference-style link.</p>
リンク
※[id]でパスとタイトルを指定するので、何箇所でも使える
※△は半角空白
This is [an example]△[id] reference-style link.

[id]: http://yahoo.co.jp/ “Optional Title Here”
<p>This is <a href=”http://yahoo.co.jp/” title=”Optional Title Here”>an example</a> reference-style link.</p>
リンク
※[1][2][3]でパスとタイトルを指定するので、何箇所でも使える
Link to [Google][1] or [Yahoo][2] or [Bing][3].

[1]: http://google.co.jp/ “Google”
[2]: http://yahoo.co.jp/ “Yahoo! Japan”
[3]: http://bing.com/ “Bing”
<p>Link to <a href=”http://google.co.jp/” title=”Google”>Google</a> or <a href=”http://yahoo.co.jp/” title=”Yahoo! Japan”>Yahoo</a> or <a href=”http://bing.com/” title=”Bing”>Bing</a>.</p>
リンク
※[1][2][3]でパスとタイトルを指定するので、何箇所でも使える
※△は半角空白
Link to [Google]△[1] or [Yahoo]△[2] or [Bing]△[3].

[1]: http://google.co.jp/ “Google”
[2]: http://yahoo.co.jp/ “Yahoo! Japan”
[3]: http://bing.com/ “Bing”
<p>Link to <a href=”http://google.co.jp/” title=”Google”>Google</a> or <a href=”http://yahoo.co.jp/” title=”Yahoo! Japan”>Yahoo</a> or <a href=”http://bing.com/” title=”Bing”>Bing</a>.</p>
リンク
※アドレスをその場で指定
Link to [Google](http://google.co.jp/ “Google”) or [Yahoo](http://yahoo.co.jp/ “Yahoo! Japan”) or
[Bing](http://bing.com/ “Bing”).
<p>Link to <a href=”http://google.co.jp/” title=”Google”>Google</a> or <a href=”http://yahoo.co.jp/” title=”Yahoo! Japan”>Yahoo</a> or <a href=”http://bing.com/” title=”Bing”>Bing</a>.</p>

Emphasis(強勢・強調)

Name Markdown HTML
強勢
タグ
*single asterisks* <p><em>single asterisks</em></p>
強勢
<em>タグ
_single underscores_ <p><em>single underscores</em></p>
強調
<strong>
**double asterisks**

* を前後に2個ずつ

<p><strong>double asterisks</strong></p>
強調
<strong>
__double underscores__

_ を前後に2個ずつ

<p><strong>double underscores</strong></p>
文字中の強勢
タグ
abc*def*ghi <p>abc<em>def</em>ghi</p>
文字中の強調
<strong>タグ
abc**def**ghi <p>abc<strong>def</strong>ghi</p>

Code(コード)

Name Markdown HTML
コード Use the 'printf()' function. <p>Use the <code>printf()</code> function.</p>
コード ''There is a literal backtick (') here.'' <p><code>There is a literal backtick (') here.</code></p>
コード A single backtick in a code span: '' ' '' <p>A single backtick in a code span: <code>'</code></p>
コード A backtick-delimited string in a code span: '' 'foo' '' <p>A backtick-delimited string in a code span: <code>'foo'</code></p>
コード Please don’t use any '' tags. <p>Please don’t use any <code><blink></code> tags.</p>
コード '—' is the decimal-encoded equivalent of '—'. <p><code>&#8212;</code> is the decimal-encoded equivalent of <code>&mdash;</code>.</p>

Images(画像)

Name Markdown HTML
画像表示 ![imag_text1](/path/img1.jpg) <div class=”figure”>
<img src=”/path/img1.jpg” alt=”imag_text1″ />
<p class=”caption”>imag_text1</p>
</div>
画像表示
※タイトル付き
![imag_text2](/path/img2.jpg “Optional title”) <div class=”figure”>
<img src=”/path/img2.jpg” title=”Optional title” alt=”imag_text2″ />
<p class=”caption”>imag_text2</p>
</div>
画像用文字リンク
※!マークを使わない
[imag_text1](/path/img1.jpg) <p><a href=”/path/img1.jpg”>imag_text1</a></p>
画像用文字リンク
※!マークを使わない
※タイトル付き
[imag_text2](/path/img2.jpg “Optional title”) <p><a href=”/path/img2.jpg” title=”Optional title”>imag_text2</a></p>
画像表示
※[id]でパスとタイトルを指定するので、何箇所でも使える
![imag_text1][id] [id]: /path/img1.jpg “Optional title attribute” <div class=”figure”>
<img src=”/path/img1.jpg” title=”Optional title attribute” alt=”imag_text1″ />
<p class=”caption”>imag_text1</p>
</div>
画像用文字リンク
※[id]でパスとタイトルを指定するので、何箇所でも使える
※!マークを使わない
[imag_text2][id] [id]: /path/img2.jpg “Optional title attribute” <p><a href=”/path/img2.jpg” title=”Optional title attribute”>imag_text2</a></p>

Miscellaneous(雑多)

Automatic Links(自動リンク)

Name Markdown HTML
URLリンク <http://yahoo.co.jp/> <p><a href=”http://yahoo.co.jp/” class=”uri”>http://yahoo.co.jp/</a></p>
URLリンク
※リンクにならないパターン
http://yahoo.co.jp/ <p>http://yahoo.co.jp/</p>
メールリンク <hoge@fuga.com> <p><a href=”mailto:hoge@fuga.com”>hoge@fuga.com</a></p>
メールリンク
※リンクにならないパターン
hoge@fuga.com <p>hoge@fuga.com</p>

Backslash Escapes(バックスラッシュエスケープ)

Name Markdown HTML
\ マークそのもの \\ <p>\</p>
' マークそのもの ' <p>'</p>
* マークそのもの \* <p>*</p>
_ マークそのもの \_ <p>_</p>
{} マークそのもの \{、\} <p>{</p>
<p>}</p>
[] マークそのもの \[、\] <p>[</p>
<p>]</p>
() マークそのもの \(、\) <p>(</p>
<p>)</p>
# マークそのもの \# <p>#</p>
+ マークそのもの \+ <p>+</p>
– マークそのもの \- <p>-</p>
. マークそのもの \. <p>.</p>
! マークそのもの \! <p>!</p>

Tables(テーブル)

Name Markdown HTML
テーブル・表 | Left align | Right align | Center align |
|:———–|————:|:————:|
| left | right | center |
| aligned | aligned | aligned |
<table>
<thead>
<tr class=”header”>
<th align=”left”>Left align</th>
<th align=”right”>Right align</th>
<th align=”center”>Center align</th>
</tr>
</thead>
<tbody>
<tr class=”odd”>
<td align=”left”>left</td>
<td align=”right”>right</td>
<td align=”center”>center</td>
</tr>
<tr class=”even”>
<td align=”left”>aligned</td>
<td align=”right”>aligned</td>
<td align=”center”>aligned</td>
</tr>
</tbody>
</table>

Others(その他)

Name Markdown HTML
取り消し線(打ち消し線) ~~Hogehoge~~
~ を前後に2個ずつ
<p><del>Hogehoge</del></p>




Visual Studio CodeでMarkdwonのプレビューを見る方法

Visual Studio Codeのデフォルト状態で可能です。
拡張機能(プラグイン)は不要です。

  1. Visual Studio Codeを起動します
  2. 新しいファイルを作ります
    別に保存しなくてもプレビューは見られますが、保存しているとリアルタイムにプレビューが変化しますので、拡張子mdで保存しておくことをオススメします
  3. Markdownで何か書きます
    例えばこんな感じ

    ## 料理のレシピ
    ## 酢ぶた
    ### 材料
    * 酢:大さじ **2**
    * しょう油:大さじ **1**
    * 砂糖:大さじ **9**
    * 酒:大さじ **3**
    ### 手順
    1. 混ぜる
    1. 捏ねる
    1. 食べる
    
  4. Ctrl + Shift + V でプレビュー画面が表示されます
  5. ウィンドウを左右分割にでもしておけば書きながらプレビューが見られます samplemd

Visual Studio Codeにpdf変換用のプラグインを入れる

Markdownからpdfに変換するには

Markdownからpdfに変換する方法は、僕が知っているのは二通りあります。

今回はMarkdown PDFパターンを使います。
Pandoc&MiKTeXを使うパターンはちょっと面倒なので選択しません。

参考
PandocとMiKTeXは別途インストールします。
vscode-pandocとMarkdown PDFはVisual Studio Codeの拡張機能(プラグイン)です。

 

Markdown PDF(プラグイン)のインストール

Markdown PDFはVisual Studio Codeのプラグインなのでインストールはいつも通りです。

  1. 『Markdown PDF』で検索する
  2. インストールボタン押す
  3. 有効ボタン押す
    ※Visual Studio CodeのバージョンによってはReloadボタンの場合あり
  4. Visual Studio Codeを再起動する
    ※Visual Studio Codeのバージョンによっては再起動が不要な場合あり
Visual Studio Codeに拡張機能(プラグイン)をインストールする方法が分からなければ以下の記事を参考にしてください。

>> [Visual Studio Code][Windows] C言語をビルド(コンパイル)&ステップ実行する
VS Codeの拡張機能のインストール』の項

 

使い方(pdfへの変換)

使い方は超簡単です。

  1. Markdownを書いたmdファイルの上で右クリック
  2. Convert Markdown to PDF をクリック
  3. mdファイルと同名+拡張子pdfでPDFファイルが生成されます
  4. 生成されたら画面上部に生成されたPDFファイルのフルパスが表示されます
  5. 手動でそのファイルを開きます

たったこれだけです!
簡単でしょ!

 

ただし注意があります!

Visual Studio Codeのプレビューで見ている状態と全く同じ表示がそのままPDFに反映されるとは限りません。
と言うか、Visual Studio CodeのプレビューとPDFの表示は全く別物という意識を持った方が良いです。

PDFにコンバートしたら必ず中身を確認してください。

 

Visual Studio Codeにhtml/docx変換用のプラグインを入れる

MarkdownをPDF化する方法を先にご紹介しましたが、実際の所、MarkdownをPDFに変換する需要ってあるのかな?と思ってます。
ワープロソフトで書いたほうが早くね?と思っていたりします。(笑)

 

HTMLファイルに変換する方が多いんじゃないかな。
HTMLのタグ打つよりはMarkdownの方がラクだろうしメリットもあるでしょう。
 

ついでにwordのdocxファイルへの変換方法も書いておきます。
それこそ、Markdown → docx への変換なんて需要あるんかいな?と思いますけど、ま、ついでですわ。
 

ってことで、必要なものは以下の通りです。

  • Pandoc
  • vscode-pandoc

Pandocのインストール

Pandocは以下からダウンロードしてください。

Installing → Windows → download page

  • Windowsの場合:pandoc-1.18-windows.msi
  • Macの場合:pandoc-1.18-osx.pkg
  • この記事ではMiKTeXは使いません。
  • この記事はWindowsを想定していますが、Macでも同じようなものです。

インストール手順

  1. ダウンロードすればこんなアイコンができます
    pandoc_inst_00000
  2. インストールしましょう
    pandoc_inst_00001

    pandoc_inst_00002 pandoc_inst_00005

    pandoc_inst_00006

これだけです。

 

vscode-pandoc(プラグイン)のインストール

vscode-pandocはVisual Studio Codeのプラグインなのでインストールはいつも通りです。

  1. 『vscode-pandoc』で検索する
  2. インストールボタン押す
  3. 有効ボタン押す
    ※Visual Studio CodeのバージョンによってはReloadボタンの場合あり
  4. Visual Studio Codeを再起動する
    ※Visual Studio Codeのバージョンによっては再起動が不要な場合あり
Visual Studio Codeに拡張機能(プラグイン)をインストールする方法が分からなければ以下の記事を参考にしてください。

>> [Visual Studio Code][Windows] C言語をビルド(コンパイル)&ステップ実行する
VS Codeの拡張機能のインストール』の項

 

使い方(html/docxへの変換)

使い方は超簡単です。

  1. Markdownを書いたmdファイルの上で Ctrl + K + P
    ショートカットキーについて

    1. Ctrl + K を押す
    2. 離す
    3. P のみを押す

  2. 画面上部に『pdf』とか『docx』とか『html』の選択肢が出てくるので、変換したいものを選びます
    選択肢について
    この記事では『pdf』には対応していないため、『pdf』を選択しないでください。
    PDFファイルを生成するには、Markdown PDFプラグインの機能を使ってください。
  3. mdファイルと同名+拡張子html(or docx)でhtmlファイル(or docxファイル)が生成されます
  4. 生成されたら自動的にそのファイルが立ち上がります

たったこれだけです。
簡単でしょ!

 

ただし注意があります!

Visual Studio Codeのプレビューで見ている状態と全く同じ表示がそのままhtml/docxに反映されるとは限りません。
と言うか、Visual Studio Codeのプレビューとhtml/docxの表示は全く別物という意識を持った方が良いです。

html/docxにコンバートしたら必ず中身を確認してください。

 

大量のmdファイルをまとめてhtml化する方法

ここまでの内容で、以下の二つの事がお分かり頂けたかと思います。

  • Markdown記法
  • Visual Studio CodeでMarkdownのプレビューを見る
  • Visual Studio CodeでMarkdownをpdf/html/docxに変換する

 

これで充分と言えば充分だと思いますが、これでは物足りない場面があるでしょう。

例えば、仕事においてこんな状況はありませんか?

 

  • 一つのプロジェクトに数社が参画している
  • 各社が作るAPI仕様書をWordやExcel等のファイルじゃなくてhtmlファイルで配布したい
  • htmlタグ打つのは面倒なのでMarkdownで書きたい

 

上記のやり方が良いか悪いかは置いといて、大量のmdファイルを一個一個ちまちまhtmlへの変換なんてやってられません。
面倒だし、工数はモッタイナイし、変換漏れが出てしまうでしょう。

一発で変換する方法が必要です。

で、ここからはPandocとbatの使い方になります。
せっかくPandocをインストールするんですから、Pandocで一括で変換させればいいんですよ。

一括変換バッチ

以下のbatをmdファイルのあるフォルダに置いて実行してください。
サブディレクトリも含めて全てのmdファイルをhtmlファイルへ変換してくれます。

@echo off
cd /d %~dp0

REM 再帰的にmdファイルを走査し、htmlファイルへ変換する
for /r %%A in (*.md) do (
    echo %%A
    
    REM 等幅フォントで見てください
    REM     +------------------------------------- -fはFROMという意味
    REM     | +----------------------------------- FROMファイルのフォーマットを指定
    REM     | |         +------------------------- -tはTOという意味
    REM     | |         | +----------------------- TOファイルのフォーマットを指定
    REM     | |         | |           +----------- -sはSTANDALONEという意味
    REM     | |         | |           |  +-------- -oは出力という意味
    REM     | |         | |           |  | +------ 出力ファイルの指定
    REM     | |         | |           |  | |
    pandoc -f markdown -t html "%%A" -s -o "%%~dpnA.html"
    pandoc -f markdown -t docx "%%A" -s -o "%%~dpnA.docx"

    REM ↑必要な方を使えばいいし、両方使っても良い
    REM フォーマットの種類は以下を参照
    REM http://pandoc.org/MANUAL.html
    REM     [Options] - [General options]
)

exit /b

 

使い方のご提案

ブログを書く際、多かれ少なかれHTMLタグを使うことがあるでしょう。
僕がブログを書く時はHTMLタグをたっくさん書きます。

でもまともにHTMLタグを書いていると大変なのでスニペットツールであるPhrase Expressを使っています。
Phrase Expressについてはコチラの記事をご覧ください。
>> 【ホンマに使わな損やで!】スニペットツールのPhraseExpressで入力効率が100万億兆倍アップ!アップ!アップゥー!

 

スニペットツールを使いたくないのであれば、HTMLじゃなくてMarkdownで書いてみてはどうでしょうか?

  1. Markdownで書く
  2. HTMLに変換する
  3. ブログ投稿する
  4. 必要があれば手直しする

という進め方だと、少し投稿への手順は増えますが、HTMLタグを気にすること無く記事を書けますしプレビューでイメージがつかみやすくなります。
記事を書く時間自体が減るかも知れませんので、割りとおすすめです。

 

参考URL

Pandoc

 

Pandoc ユーザーズガイド 日本語版

 

MiKTeX

 

Markdown: Syntax

 

Markdown Basics

 

日本語Markdownユーザー会 – Markdown記法とは

 

Wikipedia – Markdown

 

Qiita – 多様なフォーマットに対応!ドキュメント変換ツールPandocを知ろう

 

ARMERIA – PandocでMarkdownからPDF化を試してみた

 

vscode-pandoc

日本語を使ったmdファイルをhtml/docxファイルに変換する際、うまくいかない場合は上記ページの『Example: Setting for Japanese document』を参照してください。
 

$m0t0k1x2[“code”].content – マークダウンからPDFを作るならPandocよりmarkdown-pdfっすね

 

Markdown PDF(プラグインページ)

 

vscode-pandoc(プラグインページ)




まとめ

  • Markdowsnを書くだけならVisual Studio Codeのデフォルト状態でOK
  • プレビューを見るには、Ctrl + Shift + V
  • PDFに変換するには、Visual Studio CodeプラグインであるMarkdown PDFをインストール
  • PDF生成時は右クリック
  • html/docxに変換するには、PandocとVisual Studio Codeプラグインであるvscode-pandocをインストール
  • html/docx生成時は Ctrl + K , P
  • pandoc -f markdown -t html input.md -s -o output.html
昔、Wiki記法のソフトを使ってメモを取っていました。
個人的なメモなので体裁整える必要も無いので、最終的には単なるテキストファイルのメモに切り替えましたけど(笑)
 

最近はGitHubやQiitaで使われていることもあり、Markdownでドキュメントを書くことは珍しいことではありません。

と言うよりも、Markdownぐらいは書けないとダメ!っていうぐらいです。

そんな難しいものでもありませんのでぜひ使ってみてください。

参考書籍

 


 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

ABOUTこの記事をかいた人

Windows/Mac/Linuxを使う現役システムエンジニア&プログラマ。オープン系・組み込み系・制御系・Webシステム系と幅広い案件に携わる。C言語やC#やJava等数多くのコンパイラ言語を経験したが、少し飽きてきたので、最近はRubyやPython、WordPressなどのWeb系を修得中。初心者向けのプログラミング教室も運営中。オンライン・対面・出張等でプログラミングをレッスンします。