色々ググると参考サイトが出て来る
すぐに忘れる脳みそのためのメモ
Blogger でソースコードに色付けをする - google-code-prettify
求めてる内容そのままだった……（感謝）
bloggerにコードをきれいに表示するには
googleサイト
google-code-prettify
を利用して
preタグ
を使う
詳しくは上記のサイトの通りやれば出来るので、以下備忘録的な何か
ざっとした流れ
●google-code-prettifyをダウンロードして自分の環境下で解凍
●googleサイトで自分のサイトを作る
☆テンプレートをサイトキャビネットにする？→サイトのテンプレート内を探してた（そこじゃなかった）
☆新しいページを作成→テンプレートでファイルキャビネットを選べる
●解凍したgoogle-code-prettifyフォルダ内にあるprettify.jsとprettify.cssをファイルキャビネットにアップロード
☆.jsファイルがたくさんあるけど、他のは今のところ必要なさそう
●bloggerテンプレート>HTML の編集でhtmlをカスタマイズ
☆直前に記述
<!-- google-code-prettify --> <link href='https://sites.google.com/site/サイト名/ページ名/prettify.css' rel='stylesheet' type='text/css'/> <script src='https://sites.google.com/site/サイト名/ページ名/prettify.js' type='text/javascript'/> <!-- /google-code-prettify-->☆の中に記述(既にclassとかが居るけどねじ込む)
<body expr:class='"loading" + data:blog.mobileClass' onload='prttiyPrint()'>●bloggerテンプレートデザイナーでcssを追加
pre{
overflow: auto;
}
☆autoじゃなくてscrollにしたら縦スクロールバーが主張して野暮ったくなったのでautoがいいかも導入した感想：
少し見た目を変えたら追記する予定
現状だとちょっと無骨なので、コードが書いてありますよ！という感じにしたい
追記：
<や>をそのまま文字として表示する方法
HTMLタグをエスケープしてないから表示できてなかった(^p^)
さくらエディタで<を<に全部置換して完了
0 件のコメント:
コメントを投稿