【リアイム】


タップ(クリック)で消す



よみこみ中…








閉じる
もくじ

リアイム

アウトプット&知識の共有

【はてなブログ】 プログラムやコードを書く方法 はてな記法を使ってわかりやすく解説

ブログの記事にソースコードを表記したいけど、よくわからないからそのまま貼り付けよう。
そう思っていませんか?(僕も同じでした…)
これを機に綺麗なプログラムを表示していきましょう!

f:id:a1t2s2u2:20211128115540p:plain

やり方

方法はとても簡単で、編集モードを「はてな記法」に変更し、表示したいプログラムを以下のような書き方で入力するだけです。

 >|プログラミング言語名|
 コードの中身
 ||<

注意してほしいのが、>||と||<は文章頭に書く必要があります。



はてな記法への変更方法

f:id:a1t2s2u2:20211128115919j:plain

パソコンの場合

f:id:a1t2s2u2:20211128114515p:plain
編集の逆三角を押すと選択することができます。
※ 本文が既にある時は変更できない可能性があります。

スマホの場合

はてなブログ」アプリを開いて左上に表示される歯車マーク(設定)を押します。
すると、「編集モード」があるのでそれを押すと次の画面になります。
f:id:a1t2s2u2:20211128114944j:plain
ここではてな記法に変更しましょう。

画像にも書かれていますが、新しく記事を作成する場合にのみ反映されるものなので注意してください。



表示例

python
def introduction(name, age, area):
    print('初めまして。私の名前は{}です。'.format(name))
    print('年齢は{}歳で、{}に住んでいます。'.format(age, area))

introduction('太郎',20,'東京')

出力結果(python):
 初めまして。私の名前は太郎です。
 年齢は20歳で、東京に住んでいます。

html
<canvas id='canvas' style='height: 250px;width: 250px;border: 1px solid blue;'></canvas>

<script>
  const canvas = document.getElementById('canvas');
  const ctx = canvas.getContext('2d');

  canvas.height = 500;
  canvas.width = 500;

  ctx.fillRect(0,0,250,250);
  ctx.fillStyle = 'pink'
  ctx.fillRect(250,250,500,500);
</script>

出力結果(html):


はてなブログの本文中にscriptって使えましたか…?
昔できなかった気がします。はてな記法ならできるのかな…?

ちなみにCSSでこれらを自由に変更することもできそうですよ。



はてな記法について

f:id:a1t2s2u2:20211128115740p:plain

編集モードがいつもと違うため、混乱してしまう可能性があります。
そこで「見たまま編集」と比較した「はてな記法」についても軽くご説明します。

見たまま編集であれば、本文のソースコード(html)は表示されず、実際の本文と同じように編集することができますよね。しかし、はてな記法では色を変更したときでもhtmlタグが挿入されて少し見づらくなります。例えば、「おはようございます。」は編集画面で次のように表示されます。

<span style="color: #00cc00">おはようございます。</span>


編集画面で改行をすると実際の表示には反映されることや、全てにタグがついていないことから完全にhtmlというわけではないようですね。そういった点ではhtmlよりも編集が容易です。プレビューを何度も確認しなければいけないという欠点もありますがね。


htmlを理解している方であればお勧めできる記法です。もしわからない方でも、簡単に理解することができるため勉強してみてはどうでしょうか?




記事を読んでいただきありがとうございます。
プログラムを表示することができるため、これからプログラミング系の記事を投稿していこうと考えています。
はてなブログを利用している方はどれくらいhtmlやcssを使っているのでしょうか?
ブログを拡張することができるので、ブロガーに強くお勧めできる言語です。さらに拡張したいのであれば、JavaScriptというサイトの動的処理を担当するプログラミング言語を学習すると良いでしょう。例えば、トップページを記事一覧に変更したい際には次のコードを記入することで解決します。はてなブログProに入れば可能ですが、無料でjsを使って実装することもできます。
これは当ブログでの例であるため、ご自身のブログに適用するには''で囲まれているURLを変更し、head要素とかに入れておくと良いでしょう。その際にはscriptタグも忘れずに!

// トップページへのアクセスだった場合
if(location.href == 'https://riaimu.hateblo.jp/') {
    // 記事一覧へ移動
    window.location.href = "https://riaimu.hateblo.jp/archive";
}

ただ、見たまま編集の方がやりやすいですけどね。

おすすめ記事
riaimu.hateblo.jp
riaimu.hateblo.jp
riaimu.hateblo.jp
riaimu.hateblo.jp
HTML入門懐かしい。この時はコードの表示方法がわからなくてそのままやってますね。






記事の内容に間違いがあった場合は、Twitterもしくはお問い合わせフォームからお伝えください。