【初心者】はてな記法 ソースコードの表示の仕方 【ブログ】

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

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

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

目次

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

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

お願いします✨

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

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

スマホでのレスポンス対応の記事を書きました 
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

まとめ

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

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

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

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

ではではまたどー

ご愛読ありがとうございます✨

ブログランキングに参加しています‼️

応援よろしくお願いします🙇‍♂️

 



にほんブログ村にほんブログ村

 

にほんブログ村