プログラムをカラフルなhtmlにしてブログ記事に貼り付けよう！

　『なでしこスクリプトをhtmlに変換』という素敵プログラムをTKIさんが作成し、なでしこ3貯蔵庫にアップしてくださいました！
　TKIさんは、はてなブログで長年、日本語プログラミング言語「なでしこ」についてのブログを書いてくださっている方です。

　たいへん参考になります～📝👀

　さて、TKIさんによると、アドベントカレンダーの記事を彩ってもらうために 今の時期にこのプログラムを投下してくださったそうですよ！
　ありがたいですね～‼️‼️‼️
　ワタクシ一年の経つのがあまりにも早すぎて何も考えておらず・・・今年はなでしこも何のアニバーサリーでもないみたいだしな～どうすっかな～～・・・などとダラダラしていたコトを猛省いたしますですよ💧

　そんなわけで今年は、これを使わせていただき記事を書いていくつもりですので、TKIさんの許可を得て、まずはその紹介をさせていただこうと思います。

そもそもなでしことは

　日本語プログラミング言語「なでしこ」は、その名の通り日本語でプログラムが出来るという素敵プログラミング言語です❤️

　近年では2021年度、中学の教科書に採用されるなどしたことから注目度が高まったと思いますが、教育用途としてはさらに、ｖ３に大学入試に使われる疑似言語、DNCL互換モードも搭載されています。
　もちろん単なる教育用途の言語ではなく、しっかり実用的に使えます☆（もともとは、事務処理の効率化のため開発されたラシイ）
　今年はついに！　ｖ３でもサクラ記法による「MML演奏」が出来るようになるなど、進化を続けています！

　詳しくはホームページで✨

なでしこスクリプトをhtmlに変換？

　Qiitaもそうですが、コードブロック内で有名プログラミング言語のコードを自動的にシンタックスハイライトを付けて表示出来るようになっているブログは少なくありません。
　しかーし！　Qiitaもそうですが、なでしこのコードがシンタックスハイライト出来るところは、ほぼありません（あったら教えて欲しいです）

　だったら自分で色付けちゃえば良いじゃない！　とばかりになでしこのコードを解析し、分解し、タグで括ってcolorのスタイル設定を付けたHTMLに変換してくれるというのがこのプログラムです。
　HTMLに対応しているブログであれば出力されたHTMLを貼り付けるだけで、なでしこのコードがカラフルで見やすいシンタックスハイライト付きで表示されるって寸法です。
　素晴らしい✨

　この、コードを分解する部分が秀逸であり、プログラムのキモでもあるわけですが、ワタクシ無能に付き解説などは出来ません～。
　そんなわけですのでTKIさ～ん。気が向きましたら、解説でも苦労話でも、全然別のコトでも構いませんので是非に～🙏

Qiitaに対応

　ところが！
　Qiitaはspanタグ使えないよ～😭
　っていうか、使えるタグの制限が多く、しかも使えるタグであっても属性値の多くが無効であり、colorやbackground-colorの指定は出来ませんでした。

　文字色はfontタグが使えることを調べてくださり・・・
　preタグは、タグ自体は使えるんだけど自動的に「```」で括った時と同様のコードブロックになってしまってfontタグの指定が無視されてしまうので、苦肉の策としてblockquoteタグで括ってもらうことにして、Qiita用ボタンを搭載してくださいました。
　ありがとうございます！！！

参考

　遅まきながら見つけた😅
　ちょっと古い記事ですが、詳しいです。

早速使ってみましょう

　何も難しいことはありません。見たまんまです。
　上のテキストエリアになでしこのコードを貼り、「HTMLに変換」もしくは「Qiita用に変換」ボタンを押せば、下のテキストエリアにHTMLが出力されます。

　まずは比較用として、おなじみのコードブロックから

なでしこのコード

＃ねずみ算
親ねずみは２#匹
産む数は１２#匹
月数は１２#ヶ月（１年）

月数回、繰り返す。
　　番は、親ねずみを２で割る。　　　　　　　　　　#つがいは親ねずみの半分。
　　子ねずみは、番に産む数を掛ける。　　　　　　　#全てのつがいが産んだ子ねずみの総数。
　　親ねずみと子ねずみを足して、親ねずみに代入。　#その子ねずみも翌月には親ねずみに加わる。
　　//子ねずみを表示。親ねずみを表示。「-----」を表示。
ここまで。

「{月数の漢数字}ヶ月後のねずみの数は、{親ねずみの漢数字}匹」を表示。

　安定の白黒ｗ

HTMLでハイライト表示

親ねずみは２#匹
産む数は１２#匹
月数は１２#ヶ月（１年）

月数回、繰り返す。
　　番は、親ねずみを２で割る。　　　　　　　　　　#つがいは親ねずみの半分。
　　子ねずみは、番に産む数を掛ける。　　　　　　　#全てのつがいが産んだ子ねずみの総数。
　　親ねずみと子ねずみを足して、親ねずみに代入。　#その子ねずみも翌月には親ねずみに加わる。
　　//子ねずみを表示。親ねずみを表示。「-----」を表示。
ここまで。

「{月数の漢数字}ヶ月後のねずみの数は、{親ねずみの漢数字}匹」を表示。

　見事カラフルに表示されました！　やったね🤩

Qiitaでの弱点・注意点

• 　Qiitaのコードブロックでは、右上に出てくるマークをクリックで全てのコードがまるっとコピーできるようになっています。
  　ところが、全て自力で選択してコピーしなきゃいけなくなるので、「このまま貯蔵庫のエディタにコピペしたら動きます☆」なんて言っても、特に長いコードの場合はめんどくさいｗ
  　…という部分があって、本当なら長いコードほどハイライトがあった方が見やすくてありがたいはずなんだけど～😅💦
  　しかし、要所要所でコードの解説などする場合には良さそうです🎶
  　
• 　Qiitaでは、fontで文字色を変えられて、本文から独立して見えるようなのがblockquoteくらいしかありませんでした。本来は引用に使われるブロックなので、HTMLの意味的にはアレですよね💧
  　そして、Qiitaの引用ブロックのスタイルは、いちおう左側に線が付いて独立して見えるんだけど～、背景色、文字サイズ、行間が本文と変わらないからどうしても独立感が薄いよね～。
  　Qiitaではこれらを変える術がなさそげなので、やっぱコードブロックは黒でしょ！　って人もいそうだけどどうしょうもない😅
  　
• 　上述の通りpreタグではないため、ホワイトスペースが消えます。
  　あらかじめ半角スペースとタブを実体参照文字 に変換してもらっていますが、タブは半角スペース四つ分としているので、それ以外の設定にしたエディタを使ってたり、インデントがタブとスペースを混在させていたりして、インデント構文を使っているとコピペでプログラムが動かなくなる可能性があるのでご注意です。

まとめ

　カンタンに、なでしこのコードをカラフルなシンタックスハイライト付きのhtmlに変換することができました！

　Qiitaでは結構無理矢理系でなんとかしているので、このように一部びみょーな点もあるのですが、htmlのバッチリ使えるブログならばもっと強力ですよ✨
　コードブロックは黒でしょ！　という人も安心してください。
　未実装になっていますが、そのうちダークモードが実装される・・・カモ？
　ってかHTMLが分かる方なら、修飾ルールをチョコチョコ変更すれば、お好きなカラーリングで出力出来ますよ🎶
　実際にいろいろ試してプレビューを見てみてね☆

　というわけでみなさん、なでしこのコードにシンタックスハイライトを！！！

おわります

　初っぱなから他人のふんどしで相撲を取る的な記事でスミマセンでした🙏
　でも、良いものは広めたいよね～🥰💕