Markdown記法に関する備忘録 その2

ghostで実装されているMarkdown機能が、現時点ではちょっとショボイので、
即席でMarkdownとHTMLタグ双方へ変換するエディタを作成&公開

Markdown - HTML Converter
これは、以下のライブラリを使用しています。
marked.js
reMarked.js

このWebエディタを使って、Ghostへは変換されたHTMLタグをペーストして投稿することにしています。


記事投稿のための自分専用テンプレート。
Ghostで使用できるものしか記載していない。

タイトルに関する補足説明や投稿に至った経緯などの概要を記述する。

基本的な投稿文章作成

記事の文章を記載する。重要な文言にはハイライトを使う。
ほかにもインライン太字を使って見やすくする。

適度に改行を入れて段落を分ける。

// コードの説明はprism.jsの記載方法に合わせる
var test = function( a, b ){
   return a + b;
}

イメージはfluidboxを使う場合、リンクでイメージを囲む。

[![](http://hoge.com/hoge.png)](http://hoge.com/hoge.png)

手順書などはリストを使って記載する

  • 大まかな手順の中に

    1. さらに詳細な手順が発生する場合はネストする。複数行になっても自動的にインデントされるので気にする必要はない。

    2. 手順の中にイメージやサンプルコードの記載も発生する。
      リンク1
      リンク2

    3. ネストしたリストの中にもイメージを追加できる。ただし、先頭に半角スペースを入れてインデントする必要がある。

    4. 問題はインラインコードで、空白をつけてインデントしないと、リストが崩れてしてまう。かといってインデントすると、インラインコードが崩れる。

javascript  var test = function(x){  int a = 0;  a += 1; } //ブロックにならない。。

  1. GhostのMarkdownの実装がまだ追いついていないと思われる。
  2. 結論としては、Ghostが対応するまでは、リスト内にはコードを記述しない
  3. 操作手順などの文章は、リストで作成しない。
  4. または、VisualStudio CodeなどのエディタでMarkdownを記述し、htmlファイルコードに変換してからペーストする。
    • Auto-Open Markdown Preview
    • Copy Markdown as HTML
      などの拡張機能を使うといい感じになる。(これが一番いいかも)

自分用テンプレート


ヘッダ1
----
○○○○○ ○○○○○○○ ==○○○○○○○○○== ○○○○○○○○○○○ `○○○○○○○` ○○○○○ ○○○○ **○○○○○**

1. リスト1
  + AAA
  + BBB
1. リスト2
  + CCC

○○○○ ○○○ ○○○○○○○○○○○ ○○○○○○○○○○○○○○○ ○○○○○○○○○ ○○○○○○○○○○○○ ○○○○○○○○ ○○○○○○○○○ ○○○○○○○○○○ ○○○○○○○○○ ○○○○○○○

[リンク1](http://hoge.com)  
[リンク2](http://hoge.com)  

[![](http://www.usagi1975.com/content/images/2017/01/sample.png)](http://www.usagi1975.com/content/images/2017/01/sample.png)

○○○○ ○○○ ○○○○○○○○○○○ ○○○○○○○○○○○○○○○ ○○○○○○○○○ ○○○○○○○○○○○○ ○○○○○○○○ ○○○○○○○○○ ○○○○○○○○○○ ○○○○○○○○○ ○○○○○○○○○○○ ○○○ ○○○○○○○○○○○ ○○○○○○○○○○○○○○○ ○○○○○○○○○ ○○○○○○○○○○○○ ○○○○○○○○ 

ヘッダ1

○○○○○ ○○○○○○○ ○○○○○○○○○ ○○○○○○○○○○○ ○○○○○○○ ○○○○○ ○○○○ ○○○○○

  1. リスト1
  • AAA
  • BBB
  1. リスト2
  • CCC

○○○○ ○○○ ○○○○○○○○○○○ ○○○○○○○○○○○○○○○ ○○○○○○○○○ ○○○○○○○○○○○○ ○○○○○○○○ ○○○○○○○○○ ○○○○○○○○○○ ○○○○○○○○○ ○○○○○○○

リンク1
リンク2

○○○○ ○○○ ○○○○○○○○○○○ ○○○○○○○○○○○○○○○ ○○○○○○○○○ ○○○○○○○○○○○○ ○○○○○○○○ ○○○○○○○○○ ○○○○○○○○○○ ○○○○○○○○○ ○○○○○○○○○○○ ○○○ ○○○○○○○○○○○ ○○○○○○○○○○○○○○○ ○○○○○○○○○ ○○○○○○○○○○○○ ○○○○○○○○