TPBTPBHome日記ポートフォリオお問い合わせ【一覧】markdownの記法まとめ・hexoで記事を書く方法(プラグインや独自タグ定義解説あり)2016-03-01markdownの書き方の解説や、ブログジェネレータであるHexoで使える特別な記法をまとめてみました。実際にこちらのブログもMarkdownで記事を書いています。前半では、markdownの一般的な記述について説明を行います。見出し(h1)やテーブル(table)、リンク(link)、画像(iamge)など、代表的なものから順番に説明していきたいと思います。後半では、ブログジェネレータであるHexoで使える独自の記法、プラグインを活用した独自タグの利用例、また独自タグの定義方法をまとめます。hexoで使っているプラグインや使い方については、別途こちらをご覧ください。一覧まずはmarkdownの一般的な記述方法をまとめてみたいと思います。こちらはHexoでも使用できます。見出し見出しをmarkdownで記述するには、行の始めに#を付けて、見出しの文字列と半角スペースで区切ります。#の数に応じて<h2></h2>から<h6></h6>まで生成できます。h6の見出し生成されるHTMLタグは以下のようになります。"URL先のタイトル")と記述します。URLは相対パスや絶対パスの指定ができます。"node.jsに関する記事")上記のように記述すると、以下のように表示されます。Yahooのサイトブログ内のリンク生成されるHTMLタグは以下のようになります。"画像のタイトル")と記述します。widthやheightを指定した場合はHTMLタグの直接記述が必要になります。"カメラの画像を貼りました")上記のように記述すると、以下のように表示されます。生成されるHTMLタグは以下のようになります。テーブルテーブルは以下のように、|で囲みます。左寄せや右寄せ、中央揃いは行の区切りに:を用いて表します。:の位置によって寄せ方が変わります。|上記のようにmarkdownを記述すると、以下のように表示されます。aligned生成されるHTMLタグは以下のようになります。リスト表記リスト表記は-と半角スペースを先頭に記述していきます。番号付きリスト表記は1.と半角スペースを先頭に記述していきます。リストの説明を入れたい場合には先頭に半角スペース4つを追加し、前後を空行で挟みます。bar便利なことに、番号付きリストの表記では番号が連続していなくてもmarkdownレンダラーの方で上手いこと書き換えてくれます。上記のようにmarkdownを記述すると、以下のように表示されます。hogefugafooリストの説明(先頭に半角スペース4つを追加し、前後を空行で挟む)barhogefugafoobar生成されるHTMLタグは以下のようになります。強調を表すには*で囲みます。sample-em.md12*em***strong**上記のようにmarkdownを記述すると、以下のように表示されます。コード・ブロックコード・ブロック(本文とは切り離した複数行のプログラムコード)は`3つで囲み、言語名を記述します。テーマやエンジンがサポートしている言語によってはシンタックスハイライトしてくれます。本文とは切り離した場所に複数行のプログラムコードを表示させますconsole.log("hoge");```上記のようにmarkdownを記述すると、以下のように表示されます。インライン・コードインライン(本文中にプログラム・コードを含める)でコードを記述するには`1つで囲みます。sample-inlineCode.md1本文中にコードを表示するには`console.log("hoge");`と記述します上記のようにmarkdownを記述すると、以下のように表示されます。打ち消し打ち消しを表すには~2つで囲みます。sample-del.md1~~打ち消したい文字~~上記のようにmarkdownを記述すると、以下のように表示されます。生成されるHTMLタグは以下のようになります。キーボードキーボードはmarkdownではサポートされていないため、タグを直接記述する必要があるようです。markdownはhtmlが混在していてもそのまま表示してくれます。sample-keyBoard.md1キーボードは<kbd>Alt</kbd>のように記述します上記のようにhtmlを記述すると、以下のように表示されます。引用を表すには>と半角スペースを先頭に記述していきます。引用のネストも可能です。</cite>上記のようにmarkdownを記述すると、以下のように表示されます。yahoohexoで使える独自タグ次に、静的ファイルジェネレータのhexoで独自に定義された便利なタグや、プラグインから利用できるタグをご紹介したいと思います。記事の抜粋や概要hexoから標準で使えるタグです。moreをサポートしているhexoテーマなどで概要表示ができます。descriptionにも使われる場合があります。sample-excerpt.md123moreの直前に記述した文字列は概要として扱われます。moreをサポートしているテーマでは続きとして表示される内容となります。目次の自動生成こちらもhexoで使えるタグです。contentsの略で、意味は目次です。hexo-tocというプラグインをインストールすると使えるようになります。--savemarkdownで記述した文中のh2〜h6タグを収集し、目次をリスト表記で生成してくれます。こちらの記事でも前半で目次を貼り付けていますので、表示例は当記事の前半にてご確認ください。sample-toc.md12この直下に目次が生成されます。-->youtubeやvimeoの埋め込みこちらもhexoから標準で使えるタグです。markdownに動画を埋め込むには、https://www.youtube.com/watch?v=の後ろに続く動画のID動画を記述していきます。%}上記のようにしてyoutubeの動画を埋め込みます。VtL0LAHLEY4はURLに含まれる動画のIDです。%}上記のようにしてVimeoの動画を埋め込みます。27246366はURLに含まれる動画のIDです。上記のようにmarkdownを記述すると、以下のように表示されます。動画の埋め込みの表示例はこちら。youtubeの動画を埋め込む。引用元のyoutube動画:https://www.youtube.com/watch?v=VtL0LAHLEY4vimeoの動画を埋め込む。引用元のvimeo動画:https://vimeo.com/27246366flickrの画像を埋め込むこちらはプラグインのhexo-tag-flickrをインストールすると使えるタグです。IDを指定するだけで、簡単に画像を埋め込むことができます。インストールはnpmから可能です。hexo-tag-flickrmarkdownには以下のように記述します。photoは生成されるimgタグに指定したいクラス名(複数指定可)、b(=長辺1024px)は表示される画像のサイズの指定です。%}上記のようにしてflickrの画像を表示させます。上記のようにmarkdownを記述すると、以下のように表示されます。flickr画像の埋め込み例はこちら。instagramを埋め込むこちらもプラグインによって埋め込み可能です。hexo-tag-instagramをインストールすると、短い記述で埋め込みができます。%}上記のようにしてインスタグラムのポストをブログに表示させます。3yNx8hE6iEはポストのURLに含まれるIDです。上記のように記述するとインスタグラムの投稿記事をブログに表示させる事ができます。引用元のポスト:https://www.instagram.com/p/3yNx8hE6iE/twitterツイートを埋め込むこちらもプラグインによって埋め込み可能です。hexo-tag-twitterをインストールすると、短い記述で埋め込みができます。%}上記のように記述すると、以下のように表示されます。Cloudのトラックを埋め込むこちらもプラグインによって埋め込みが可能です。hexo-tag-soundcloudをインストールすると、短い記述で埋め込みができるようになります。%}上記のように記述すると、以下のように表示されます。mapを埋め込むこちらもプラグインによって埋め込み可能です。mapが埋め込まれる便利なタグです。hexo-tag-googlemapsmarkdownには以下のように記述します。以下の15は地図のズーム倍率です。100%は表示される幅、250pxは高さとなります。mapを表示させます。TwentyTwenty)画像でビフォー・アフターをスライド表示させます。hexo-tag-twentytwentyを使うと、簡単な記述で比較画像を表示させることができるようになります。--save記述方法は、markdownに、以下のtwtwタグを記述するだけでOKです。before.jpgはビフォーの画像。after.jpgはアフターの画像になります。%}上記のように記述すると、以下のように表示されます。応用編!hexoで独自に定義したタグを使うhexoでは通常のmarkdown記述が利用できる上に、前述したような便利な独自タグをプラグインから利用できるようになっています。これでも不十分である場合には独自にプラグイン開発するか、themes/your-theme/scripts下でタグを定義することもできます。詳しくはhexo.extend.tag.registerについて解説されてるオフィシャルサイトのドキュメントをご覧ください。markdownタグ独自定義するタグの実装例をいくつか挙げたいと思います。先程も例を挙げたインスタグラムの投稿記事を埋め込むプラグインを見ていきたいと思います。前述と同じ説明になりますが、下記のコードはタグを記述して、簡単にインスタグラムの埋め込みHTMLを生成させるものです。%}上記のようにしてinstagramの投稿記事を埋め込みます。「8ppwIyE6lU」は記事URLに含まれるショートコードです。上記のようにmarkdownを記述すると、以下のように表示されます。引用元のinstagram記事:https://www.instagram.com/p/8ppwIyE6lU/上記のタグが機能するように、themes/your-theme/scripts/extend.jsで以下のように定義しました。コードの処理内容を説明すると、タグに渡される記事のショートコードを元に、Instagramの埋め込みHTMLを返します。メリットとしては、以下のコードを最新の内容にメンテナンスすることで、全ての記事対して最新の埋め込みコードが適用できる点です。記述されている部分からxxxの箇所を取得する。instagramの埋め込みHTML。false});こちらはプラグインとして、実際にnpmに公開していますのでインストールして使うこともできます。markdownタグ続いて、もう一つ実装例をご紹介したいと思います。Hexoの記事でBootstrapのAlertsみたいな注意書き欄を簡単に表示させたいなと思いました。そこで当ブログでは、注意書きの欄をmarkdownから簡単に生成できるように、hexo.extend.tag.registerで独自タグを拡張定義しています。markdownの記述例は以下のような形です。%}タグの中で注意書きの本文を記述します。タグの内部でも`markdown`の記法が使えます。%}上記のようにmarkdownを記述すると、以下のように表示されます。注意書きのサンプルタイトルタグの中で注意書きの本文を記述します。こちらの中でもmarkdownの記法が使えます。上記のタグが機能するように、themes/your-theme/scripts/extend.jsで以下のように定義しました。ここで一つ注意点ですが、通常タグで囲ったテキストは関数に渡される文字列として扱われるので、markdownとしてHTMLにレンダリングされません。そこで、hexoのmarkdownレンダラにも使用しているmarkedを使ってrequireしてHTMLにレンダリングさせます。markdownの記述をHTMLにレンダリングして、改行を除去する。クラス名やアイコンを変える。Webページ上でmarkdownの結果をすぐに確認したい時にはRemarkableやDillingerを使っています。Remarkableは2つの画面で構成されていて、左側にmarkdownを記述していくと瞬時にHTMLへ変換してくれる大変便利なサービスとなっています。Dillingerも同様のサービスです。DEMO最後にいかがだったでしょうか?今回はmarkdownの一般的な記法と、ブログジェネレータのhexoで使える独自タグ、またその拡張方法について触れました。markdownで記事を書く際や、タグの拡張を検討されている場合の参考にして頂ければ幸いです。(てぃー)ゆるふわポートレートや自然風景をのんびり撮影しています。その他の趣味は音楽制作とメダカの鑑賞。撮影や写真掲載等のご依頼については、SNSまたはお問い合わせフォームまでお願いいたします。teaコンテンツの保存及び転載は固くお断りいたします。当サイトに記載されるコンテンツ(文章・画像等)は著作権により保護されています。万が一コンテンツや写真の盗用・二次利用が見つかった場合には500pxの写真販売価格を参考に差止め請求及び使用料または損害賠償請求をさせて頂く場合がございますので予めご了承下さい。記事に関するお問い合わせや寄稿については上記のSNSまでご連絡をお願いいたします。