ソースコードなどを表示する際に、構文に応じた色分けをするシンタックス・ハイライト。プログラマでもWEBデザイナーでもないのでそんなに使わないけれど、たまには使う。
前の記事でたちまち必要になり、はてなブログでシンタックス・ハイライトを使う方法を探してみたら…。
- シンタックス・ハイライトははてな記法かMarkdown記法でのみ。
- Markdownを覚えることに
- 参考にしたMarkdown記法チートシート
- とりあえず覚えるやつ
- まとめ
シンタックス・ハイライトははてな記法かMarkdown記法でのみ。
とりあえず公式を確認。
ふむ。はてな記法では使えるんだな。他は？
公式でビンゴな記事は見つけられなかったがここに、
シンタックス・ハイライトは、編集画面が「はてな記法」モードおよび「Markdown」モードのときに利用できます。
そっか…。「見たままモード」はダメ。HTMLでもダメだよね。はてな記法もMarkdownも残念ながら使ったことない。
うーん…。
Markdownを覚えることに
だからといって、始めたばかりなのに一つ諦めるというのはないよなあ、ということで、イヤイヤながらはてな記法もMarkdownなどを見てみる。
うむ、まあ途中でMarkdownに切り替えてやればいいだろ。
で、設定で見かけた編集モードの選択でMarkdownモードに変えて見たけど、あれ、編集中の記事は切り替わってない。
と思ってまたまたヘルプを見ると、
編集モードは、記事を書きはじめる際に切り替えるようにしてください
うん？
いったん記事を「公開」あるいは「下書き保存」すると、再編集する際に編集モードを変更することはできません
なんだよ、そうかよ。じゃあ、シンタックス・ハイライトを使いたければ、はてな記法かMarkdownを覚えるしかないじゃん。
くっそ…
…
じゃあ覚えますよ。というか、ざっと見たところ簡単そうなので、覚えた方が得かもという気がしてきた。
参考にしたMarkdown記法チートシート
それでチートシート探し。
この記事とか
この記事とか
を参考にさせて頂いた。
あまり詳しすぎるのはパス。
とりあえず覚えるやつ
とりあえず、何も参照せずに使えるようになった方が良さそうなものだけピックアップ。自分用のチートシートです。
見出し
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が大きかったりして見にくいので画像にしている。
リンク
Markdown記法での書き方
[https://www.shigo45.com/] [https://www.shigo45.com/:title] [https://www.shigo45.com/:embed:cite]
置き換えられるHTML
<a href="https://www.shigo45.com/">https://www.shigo45.com/</a><br> <a href="https://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="https://www.shigo45.com/">www.shigo45.com</a></cite></p></a>
このブログでの見た目
https://www.shigo45.com/
45 For Trash
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
- リストレベル2
- リストレベル2-1
- リストレベル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"><</span><span class="synStatement">p</span><span class="synIdentifier">></span>私は丸見えのタグで囲われた段落である。<span class="synIdentifier"></</span><span class="synStatement">p</span><span class="synIdentifier">></span> <span class="synIdentifier"><</span><span class="synStatement">p</span><span class="synIdentifier">></span>私も丸見えのタグで囲われた段落である。<span class="synIdentifier"><</span><span class="synStatement">br</span> <span class="synIdentifier">></span>あっ、たった今段落内で改行されちゃった。<span class="synIdentifier"><</span><span class="synStatement">br</span><span class="synIdentifier">></span>でも丸見え状態だから一見改行されたように見えないよ。<span class="synIdentifier"></</span><span class="synStatement">p</span><span class="synIdentifier">></span> </pre>
このブログでの見た目
<p>私は丸見えのタグで囲われた段落である。</p> <p>私も丸見えのタグで囲われた段落である。<br>あっ、たった今段落内で改行されちゃった。<br>でも丸見え状態だから一見改行されたように見えないよ。</p>
まとめ
自分が使いそうなのはこれくらい。一記事書く間に覚えられる。しかも思った以上に楽。便利。
何より、はてなブログの「見たままモード」の重さに辟易しかけていたのでちょうどよかった。
Markdown記法おすすめ！
WordPressでもプラグインでMarkdown記法が使えるようになるそうな。やってみよう。
