皆さんごきげんいかがでしょうか？
今回は、はてな記法のソースコードを
表示する方法を書いていこうと思います
目次
初心者向けなので(自分の忘備録でもあります💦)
悩んでいる方以外は軽く目通しで
お願いします✨
プログラムのソースコードを表示
当ブログで楽天モーションウィジェットの
スマホでのレスポンス対応の記事を書きました
puyopan-life.work
その時にしたソースコード表示の仕方を
例にして書いて行こうと思います
やり方は簡単‼️
>|ファイルタイプ| ～～ ||<
上記のコードのファイルタイプに
ソースコードのタイプを書いて
～～にコピペしてきたコードを貼り付けるだけ✨
下記のファイルタイプはhtml
<center> <div style="float;left;"> <!--楽天モーションウィジェット--> </div> </center>
ちなみに下記のファイルタイプはcss
<center> <div style="float;left;"> <!--楽天モーションウィジェット--> </div> </center>
スーパーpre記法（シンタックス・ハイライト）という
記法を使用してみました
ソースコードに色がつきカラフルになってます🌈
上記リンクにも書いてありますので
こちらも参考にしてみたらいいと思います
ソースコードを文章として表示
記事を書いていてソースコードを文章にしたい時
<!--ここにコピペ-->をはてな記法で書くと
文章にならず消えてしまい変な文章になります
表示されていません<left>と書いてあります
これを解消するにはHTMLコードで使用される
エスケープシーケンスの一つである
<を記入すると文章として表示されます
※特殊な文字を普通の文字として扱うことをエスケープ
そのために使う文字列をエスケープシーケンスと言うそうです
詳しくは下記リンクで
www.shurey.com
まとめ
ブログを書くようになり必然的に
ソースコードと触れ合うようになってきました
まだまだ初心者ですがちょっとした
コードくらいは書けるようになりたいです
ではではまたどー
puyopan-life.work
puyopan-life.work
puyopan-life.work
puyopan-life.work