ぷよぱんブログ

牛飼いと投資と日常ときどきサッカー

はてな記法 ソースコードの表示の仕方 初心者向け

皆さんごきげんいかがでしょうか?

今回は、はてな記法のソースコードを

表示する方法を書いていこうと思います

目次

初心者向けなので(自分の忘備録でもあります💦)

悩んでいる方以外は軽く目通しで

お願いします✨

 


プログラムのソースコードを表示

当ブログで楽天モーションウィジェットの

スマホでのレスポンス対応の記事を書きました 
puyopan-life.work

その時にしたソースコード表示の仕方を

例にして書いて行こうと思います

やり方は簡単‼️

>|ファイルタイプ| ~~ ||<

上記のコードのファイルタイプに

ソースコードのタイプを書いて

~~にコピペしてきたコードを貼り付けるだけ✨

下記のファイルタイプはhtml

<center>
<div style="float;left;">
<!--楽天モーションウィジェット-->
</div>
</center>

ちなみに下記のファイルタイプはcss

<center>
<div style="float;left;">
<!--楽天モーションウィジェット-->
</div>
</center>

スーパーpre記法(シンタックス・ハイライト)という

記法を使用してみました

ソースコードに色がつきカラフルになってます🌈

はてな記法一覧 - はてなブログ ヘルプ

上記リンクにも書いてありますので

こちらも参考にしてみたらいいと思います




 

ソースコードを文章として表示

記事を書いていてソースコードを文章にしたい時

<!--ここにコピペ-->をはてな記法で書くと

文章にならず消えてしまい変な文章になります

この文章の横にはソースコードがありますが

表示されていません<left>と書いてあります

これを解消するにはHTMLコードで使用される

エスケープシーケンスの一つである

&ltを記入すると文章として表示されます

※特殊な文字を普通の文字として扱うことをエスケープ
  そのために使う文字列をエスケープシーケンスと言うそうです

詳しくは下記リンクで
www.shurey.com

まとめ

ブログを書くようになり必然的に

ソースコードと触れ合うようになってきました

まだまだ初心者ですがちょっとした

コードくらいは書けるようになりたいです

ではではまたどー

puyopan-life.work

puyopan-life.work



puyopan-life.work
puyopan-life.work



puyopan-life.work
puyopan-life.work



puyopan-life.work
puyopan-life.work