hexoではMarkdownで記事を書きます。

Markdownで記事を書く上で最低限覚えておいてほしい事を書きます。

こんな感じで書くとMarkdownだけじゃなくて、記事自体もシンプルできれいに書けると思いますって感じで書いていきます。

タイトル - <h~></h~>

各見出しに使うと思います。

ブログのタイトルが<h1></h1>、記事のタイトルも<h1></h1>という作り(本ブログでは)なので、ブログ記事の各要素毎のヘッダーは<h2></h2>で書きます。

HTML<h~></h~>Markdownで書くには#(シャープ)を使います。

1
2
3
4
5
6
7
8
9
## 今日食った飯 #<h2></h2>
今日はすき屋の牛丼を食べました。
### すき屋の牛丼と言えば #<h3></h3>
安いですよねー。
最近並み盛りでおなかいっぱいです。
### すき屋って #<h3></h3>
牛丼って色々なトッピングがあっていいですよねー。
## かかったお金 #<h2></h2>
...

みたいな書き方になります。

ちなみにソースは以下のようになります。

1
2
3
4
5
6
7
<h2>今日食った飯</h2>
<p>今日はすき屋の牛丼を食べました。</p>
<h3>すき屋って</h3>
<p>安いですよねー。</p>
<p>最近並み盛りでおなかいっぱいです。</p>
<h2>かかったお金</h2>
<p>...</p>

リスト表記 - <ul></ul>, <ol></ol>

リスト表示は<ul></ul><ol></ol>の書き方があります。

<ul></ul>

1
2
3
4
- hoge
- fuga
- foo
- bar

これでリスト表示ができます。

ソースは以下のようになります。

1
2
3
4
5
6
<ul>
<li>hoge</li>
<li>fuga</li>
<li>foo</li>
<li>bar</li>
</ul>

<ol></ol>

1
2
3
4
1. hoge
2. fuga
3. foo
4. bar

ソースは以下のようになります。

1
2
3
4
5
6
<ol>
<li>hoge</li>
<li>fuga</li>
<li>foo</li>
<li>bar</li>
</ol>

<li></li>の下に段落をつけて説明文などをつけたい場合

空行を一つ挟んで、半角スペース4つを頭につけます。

1
2
3
4
5
6
7
8
9
- hoge
[]
hogehogehoge
[]
- fuga
[]
fugafugafugafuga
[]
fugafugafugafuga

すると以下のように表示されます。

1
2
3
4
5
6
7
8
9
10
11
<ul>
<li>
<p>hoge</p>
<p> hogehogehogehoge</p>
</li>
<li>
<p>fuga</p>
<p> fugafugafugafuga</p>
<p> fugafugafugafuga</p>
</li>
</ul>

引用 - <blockquote></blockquote>

記事の引用時に使う事が多いと思います。

Markdownでは以下のように書きます。

1
> hogehoge

HTMLは以下のように出力されます。

1
2
3
<blockquote>
<p>hogehoge</p>
</blockquote>

Hexo記法を使う

Markdownで引用をしようとすると文章自体は簡単に出来るのですが、どこからの引用かがかけません。

書くためにはHTMLと合わせて書きます。

1
2
> hogehoge
> <cite>AdMax Tech Block - <a href="http://blog.admax.ninja/2014/09/11/how-to-write-article-in-hexo/" title="">Hoge</a> </cite>

せっかくMarkdownを使っているのだからスマートに書きたい!

それHexoなら出来るよ。

ってことでHexo記法(はてな記法みたい)での書き方で書きましょう。

1
2
3
{% blockquote [author[, source]] [link] [source_link_title] %}
content
{% endblockquote %}

上記のMarkdownHexo記法で書くと以下のような感じです。

1
2
3
{% blockquote AdMaxTechBlog http://blog.admax.ninja/2014/09/11/how-to-write-article-in-hexo/ Hoge %}
hogehoge
{% endblockquote %}

{}全角で表示していますが、書くときは半角になおしてください。

うまく表示されなかったので、全角に逃げました。

Hexo記法を使えば以下のように出力されます。

1
2
3
4
5
6
7
8
9
<blockquote>
<p>hogehoge</p>
<footer>
<strong>AdMaxTechBlog</strong>
<cite>
<a href="http://blog.admax.ninja/2014/09/11/how-to-write-article-in-hexo/" target="_block" rel="external">Hoge</a>
</cite>
</footer>
</blockquote>

画像 - <img></img>

1
![alt](src "title")

という形で書きます。

以下のように出力されます。

1
<img src="src" alt="alt" title="title" >

です。

Hexo記法

これにもHexo記法があります。

が、使ってみて、使いづらかったのでやめます。

Code - <figure></figure>, <code></code>

1
2
3
```javascript
console.log("Hoge");
```

のように書きます。

出力されるHTMLはこんな感じです。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<figure class="highlight javascript">
<table>
<tbody>
<tr>
<td class="gutter">
<pre>
<div class="line">1</div>
</pre>
</td>
<td class="code">
<pre>
<div class="line">
<span class="built_in">console</span>
".log("
<span class="string">"Hoge"</span>
");"
</div>
</pre>
</td>
</tr>
</tbody>
</table>
</figure>

シンタックスハイライトがあるサービス(GitHubとかQiita)とかだと```の後ろに言語を指定すると、それようにシンタックスハイライトしてくれます。

ちなみにHexoのテーマにもsyntaxhighlightに対応しているやつが多数あります。

もしかしたら標準で対応しているかも。

Hexo記法

これもおしゃれに書いちゃおうってことで僕はこっちをおすすめします。

1
2
3
{% codeblock [title] [lang:language] [url] [link text] %}
content
{% endcodeblock %}

これでだいぶおしゃれに詳細情報かけます。

上記のMarkdownHexo記法に直すとしたら以下のようになります。

1
2
3
% codeblock sample.js lang:javascript %}
content
% endcodeblock %}

こんぐらいのソースコードでしたら、なに使っても同じだと思いますが、ちょっとソースコードが増えると俄然Hexo記法の方が書きやすかったです。

gist

ちなみにHexo記法にはGistのソースコードを簡単に貼付けられる記法もあります。

なので、ブログのソースコードをすべてGistで管理なんてことも出来ます。

1
% gist username/gist_id [filename] %}

という感じで使えます。

1つのGistページに1つのソースファイルしかない場合は

1
% gist NinjaAdMax/62a72a43383b12b61ac3 %}

とします。

そうすると

の用に表示されます。

1つのGistページに複数のソースファイルがある場合は

1
% gist NinjaAdMax/4db8ceac3e30b8c586d2 HogeViewController.h %}
1
% gist NinjaAdMax/4db8ceac3e30b8c586d2 HogeViewController.m %}

という風にファイルごとに分けて表示することが出来ます。

終わりに

長らく書きましたが、書きやすい方法で書くのが一番だと思います。

ただこのブログはMarkdownで書く事が推奨されているので、変な装飾(文字色変えたり)などではなく、きれいに目に優しいブログになるように心がけたいです。

以上になります。