読者です 読者をやめる 読者になる 読者になる

45 For Trash

しごうするのか、されるのか。

はてなブログでシンタックス・ハイライトを使いたくてMarkdown記法の超抜粋チートシート。

はてなブログカスタマイズ

ソースコードなどを表示する際に、構文に応じた色分けをするシンタックス・ハイライト。プログラマでもWEBデザイナーでもないのでそんなに使わないけれど、たまには使う。

前の記事でたちまち必要になり、はてなブログでシンタックス・ハイライトを使う方法を探してみたら…。

f:id:shigo45:20151217120935j:plain

シンタックス・ハイライトははてな記法かMarkdown記法でのみ。

とりあえず公式を確認。

help.hatenablog.com

ふむ。はてな記法では使えるんだな。他は?

公式でビンゴな記事は見つけられなかったがここに、

staff.hatenablog.com

シンタックス・ハイライトは、編集画面が「はてな記法」モードおよび「Markdown」モードのときに利用できます。

そっか…。「見たままモード」はダメ。HTMLでもダメだよね。はてな記法もMarkdownも残念ながら使ったことない。

うーん…。

Markdownを覚えることに

だからといって、始めたばかりなのに一つ諦めるというのはないよなあ、ということで、イヤイヤながらはてな記法もMarkdownなどを見てみる。

うむ、まあ途中でMarkdownに切り替えてやればいいだろ。

で、設定で見かけた編集モードの選択でMarkdownモードに変えて見たけど、あれ、編集中の記事は切り替わってない。

と思ってまたまたヘルプを見ると、

help.hatenablog.com

編集モードは、記事を書きはじめる際に切り替えるようにしてください

うん?

いったん記事を「公開」あるいは「下書き保存」すると、再編集する際に編集モードを変更することはできません

なんだよ、そうかよ。じゃあ、シンタックス・ハイライトを使いたければ、はてな記法かMarkdownを覚えるしかないじゃん。

くっそ…

じゃあ覚えますよ。というか、ざっと見たところ簡単そうなので、覚えた方が得かもという気がしてきた。

参考にしたMarkdown記法チートシート

それでチートシート探し。

この記事とか

nohack-nolife.hatenablog.com

この記事とか

seeku.hateblo.jp

を参考にさせて頂いた。

あまり詳しすぎるのはパス。

とりあえず覚えるやつ

とりあえず、何も参照せずに使えるようになった方が良さそうなものだけピックアップ。自分用のチートシートです。

見出し

Markdown記法での書き方
#見出し1
##見出し2
###見出し3
####見出し4
#####見出し5
######見出し6
置き換えられるHTML
<h1>見出し1</h1>
<h2>見出し2</h2>
<h3>見出し3</h3>
<h4>見出し4</h4>
<h5>見出し5</h5>
<h6>見出し6</h6>
このブログでの見た目

(注)そのまま出力すると本当の見出しと見間違えたりmarginが大きかったりして見にくいので画像にしている。

f:id:shigo45:20151217112707j:plain

リンク

Markdown記法での書き方
[http://www.shigo45.com/]
[http://www.shigo45.com/:title]
[http://www.shigo45.com/:embed:cite]
置き換えられるHTML
<a href="http://www.shigo45.com/">http://www.shigo45.com/</a><br>
<a href="http://www.shigo45.com/">45</a><br>
<iframe src="//hatenablog-parts.com/embed?url=http%3A%2F%2Fwww.shigo45.com%2F" title="45" class="embed-card embed-webcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 155px; max-width: 500px; margin: 10px 0px;"></iframe><cite class="hatena-citation"><a href="http://www.shigo45.com/">www.shigo45.com</a></cite></p></a>
このブログでの見た目

http://www.shigo45.com/
45
www.shigo45.com

段落

Markdown記法での書き方

段落にしたい部分の下に空白行を入れる。

私が段落でございます。
[ここに空白行を入れる]
本当に私が段落でございます。
[ここに空白行を入れる]
置き換えられるHTML
<p>私が段落でございます。</p>
<p>本当に私が段落でございます。</p>
このブログでの見た目

私が段落でございます。

本当に私が段落でございます。

改行

Markdown記法での書き方
そろそろ改行がきますよ。[ここに半角スペースを2個]  
ほらやっぱり改行が来たでしょ?[ここに半角スペースを2個]  
来ちゃったね。
置き換えられるHTML
そろそろ改行がきますよ。<br>
ほらやっぱり改行が来たでしょ?<br>
来ちゃったね。
このブログでの見た目

そろそろ改行がきますよ。
ほらやっぱり改行が来たでしょ?
来ちゃったね。

引用

Markdown記法での書き方
>私を引用するのですか?本当に?
置き換えられるHTML
<blockquote>
<p>私を引用するのですか?本当に?</p>
</blockquote>
このブログでの見た目

私を引用するのですか?本当に?

リスト

Markdown記法での書き方

行頭にアスタリスク[*]、ハイフン[-]、プラス[+] のいずれかを書く。   これらの後に半角スペースを入れる。
レベル下げは、記号の前に半角スペースを4つ入れる。

*[半角スペース]リストレベル1
*[半角スペース]リストレベル2
[半角スペース4個]*[半角スペース]リストレベル2-1
[半角スペース4個]*[半角スペース]リストレベル2-2
置き換えられるHTML
<ul>
<li>リストレベル1</li>
<li>リストレベル2
<ul>
<li>リストレベル2-1</li>
<li>リストレベル2-2</li>
</ul>
</li>
</ul>
このブログでの見た目
  • リストレベル1
  • リストレベル2
    • リストレベル2-1
    • リストレベル2-2

番号リスト

Markdown記法での書き方

行頭に数字を入力した後ピリオド[.]をつける。
(入力する数字は何でも良く、何を入力しようが自動的に番号がふられる。)
これらの後に半角スペースを入れる。
レベル下げは、記号の前に半角スペースを4つ入れる。

1.[半角スペース]リストレベル1
1.[半角スペース]リストレベル2
[半角スペース4個]1. リストレベル2-1
[半角スペース4個]1. リストレベル2-2
置き換えられるHTML
<ol>
<li>リスト1</li>
<li>リスト2
<ol>
<li>リスト2-1</li>
<li>リスト2-2</li>
</ol>
</li>
</ol>
このブログでの見た目
  1. リストレベル1
  2. リストレベル2
    1. リストレベル2-1
    2. リストレベル2-2

pre記法

そもそもこれを使うのが目的だったのだ!コードなどをシンタックス・ハイライトで表示。 ここではHTMLを表示してみる。

Markdown記法での書き方
 ```html
 <p>私は丸見えのタグで囲われた段落である。</p>
 <p>私も丸見えのタグで囲われた段落である。<br>あっ、たった今段落内で改行されちゃった。<br>でも丸見え状態だから一見改行されたように見えないよ。</p>
 ```

(注)pre記法の入れ子の仕方がわからなかったので上の表記には行頭にスペースが入っている。本当は入れない。もちょっと勉強して出直します。

置き換えられるHTML
<pre class="code lang-html" data-lang="html" data-unlink="">
<span class="synIdentifier">&lt;</span><span class="synStatement">p</span><span class="synIdentifier">&gt;</span>私は丸見えのタグで囲われた段落である。<span class="synIdentifier">&lt;/</span><span class="synStatement">p</span><span class="synIdentifier">&gt;</span>
<span class="synIdentifier">&lt;</span><span class="synStatement">p</span><span class="synIdentifier">&gt;</span>私も丸見えのタグで囲われた段落である。<span class="synIdentifier">&lt;</span><span class="synStatement">br</span>
<span class="synIdentifier">&gt;</span>あっ、たった今段落内で改行されちゃった。<span class="synIdentifier">&lt;</span><span class="synStatement">br</span><span class="synIdentifier">&gt;</span>でも丸見え状態だから一見改行されたように見えないよ。<span class="synIdentifier">&lt;/</span><span class="synStatement">p</span><span class="synIdentifier">&gt;</span>
</pre>
このブログでの見た目
 <p>私は丸見えのタグで囲われた段落である。</p>
 <p>私も丸見えのタグで囲われた段落である。<br>あっ、たった今段落内で改行されちゃった。<br>でも丸見え状態だから一見改行されたように見えないよ。</p>

まとめ

自分が使いそうなのはこれくらい。一記事書く間に覚えられる。しかも思った以上に楽。便利。

何より、はてなブログの「見たままモード」の重さに辟易しかけていたのでちょうどよかった。

Markdown記法おすすめ!

WordPressでもプラグインでMarkdown記法が使えるようになるそうな。やってみよう。


This is a post from 45 For Trash

POLICY :1. このサイトへのリンクは自由です。 2. できるだけ誤りのないように書いているつもりですが、当サイトに掲載する情報の正確性は保証できません。また掲載している情報は執筆日現在の情報です。 3. 当サイト、当サイトリンク先、広告リンク先の利用によって生じたいかなる損害についても一切の責任を負いません。 4. 当サイトはGoogleアドセンス、Amazonアソシエイト、その他アフィリエイトの広告を掲載している場合があります。 5. 当サイトご利用の場合は上記の事項に同意したものとみなします。