アメーバブログを趣味で使うプログラムの保管用よして使用していきます。
QiitaやZennを使ったほうがいい？聞こえませんでした。
preタグを使いたい
まず記事にコードを保存するためにpreタグを使用できるようします。
wordpressみたいにエディターにpreタグを追加できるか調べてみましたが基本用意されていないHTMLは自分で囲むしかないみたいですね。
何かしら追加できる方法があれば行ってみたいと思います。
まずはpreタグで囲んだものを
こんな感じで出したいと思います。
よくあるこんな感じにpreとcodeタグを使ってHTMLを作成してみます。
それをプレビュー表示すると
こんな感じになります。
code-prettifyを使いたい
分かっていましたがpタグは勿論エスケープされません。
かっこよくjavascriptでエスケープ処理したりとかcode-prettifyのjavascriptを使用したりしたいですがアメブロはどうやら2017年から自前のjavascriptが基本的に使えないみたいです。
なのでエスケープしたものを書き込んでもいいのですが、このブログではgoogleのcode-prettifyのスタイルを使用したいのでそれに対応したものを書き込みます。
それっぽいものが出てきました。
あとはpreのCSSをcode-prettifyのdesertテーマから拝借してきて適用すればそれっぽくなりました。
- <script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
こんな感じでブログを魔改造しつつ趣味のコードを保存していこうかと思います。
wordpressとかでやれって聞こえてきそうですが諸事情でアメブロで更新していきます。
次はブログのCSS変更の記事でも書こうかな
では