いろいろブログカスタマイズメモ

はてなブログのカスタマイズ、書き方などのメモ、チートシートです。/※本サイトはアフィリエイトプログラムによる収益を得ています。ページ内のリンクがアフィリエイトリンクの場合があります。

はてなブログのMarkdownでコードやスクリプトを表記する


※本サイトはアフィリエイトプログラムによる収益を得ています。
 ページ内のリンクがアフィリエイトリンクの場合があります。

 MarkdownでプログラムやHTMLなどのコードやスクリプトを表記する方法です。

「```」(バッククォートの3連続した行」で囲む

「```」(バッククォートの3連続した行」で囲むと、そこがコードの表記とされます。

 例えば次のような表記だと、


 ```
 <html>
   <head>
     <title>テストページ</tite>
   </head>
   <body>
     こんにちは!
   </body>
 </html>
 ```

こうなります。

<html>
  <head>
    <title>テストページ</tite>
  </head>
  <body>
    こんにちは!
  </body>
</html>

 バッククォートの数を1または2にすると、改行せずとなります。

<html> <head> <title>テストページ</tite> </head> <body> こんにちは! </body> </html>

 このあたりの細かいところはサービスで微妙に違うようで、はてなブログではこうなるようです。

シンタックスに色を付ける

 囲っているコードが特定の言語の場合、「```」の後ろに言語を指定するとシンタックスハイライトが使えます。

 例えば「```html」とすると、こうなります。

<html>
  <head>
    <title>テストページ</tite>
  </head>
  <body>
    こんにちは!
  </body>
</html>

コードをエスケープして載せる

 HTMLタグなどをちょっとそのまま載せたいときは、特定の文字を参照文字にエスケープして載せることもできます。

 手動で書き換えていってもいいのですが、例えばこのサイトのようなツールで変換してやると楽です。

HTMLエスケープツール | Web制作小物ツール - dounokouno.com