[blogger]ブログにコードを見やすく貼る。Google-code-prettify導入しました。CustomAboutNAVER2012/04/30[blogger]ブログにコードを見やすく貼る。Google-code-prettify導入しました。カスタマイズ拙い知識ながら、bloggerのテンプレートをいじったり、それをブログに書いたりしていて、なんとかコードは貼れるように覚えてきたけど、もう少し見やすく出来ないものかと考えて、自動的に見やすくしてくれるように、Google-code-prettifyなるものを使ってみることにしました。linenums">(コード)</pre>参考にさせて頂いたサイト。Hosting】から「prettify-small-1-Jun-2011.tar.bz2」をダウンロード。・簡略化なのか、サイズの小さいもので導入しました。中にある「prettify.css」の編集(メモ帳などで可能です。)、その後アップロード。linenums】とpreタグを指定した時に、行番号が5ずつしか表示されないので、1ずつ表示させたいので一部編集しました。HTMLにコードを追加。bloggerのテンプレートデザイナー→カスタムCSSの追加で、スタイルを好みに合わせます。後、テンプレートのバックアップは忘れないようにしておきます。ファイルのダウンロード■まずは、上であげたGoogleのサイトから、構成ファイルをダウンロードします。files」と説明のある方でいいようです。ファイルは圧縮ファイルになっているので、解凍します。「prettify.css」の編集、アップロード※行番号をつけたりしない、もしくは5行毎がいい場合は、この工程はパスしてください。■ダウンロードしたフォルダの中にある「prettify.css」をメモ帳などで開きます。ここで、スタイルを全て編集してしまってもいいのですが、テンプレートデザイナーを利用して後で決めたほうが、プレビューを見ながら変更できるので、行番号の為だけに編集します。li.L1,li.L3,li.L5,li.L7,li.L9{background:#eee}ファイルを開くとこんな内容になっています。メモ帳で開くと、改行されずにつながってるので、もう少しカオスですが。*/」で挟んでコメントアウトしてあげます。挟んだら、上書き保存か、別ファイル名を付けて保存します。■次はファイルをアップロード。googleサービスで、サイト作成も無料で可能ですので、アップロード用のURLを作っておくと便利でした。そのような適当なサイトにダウンロードしたファイルをアップします。type='text/javascript'/>このようにコードを追加します。--省略--(bodyだけの場合ももちろんあります)>」の最後の部分に【onload='prettyPrint()'】と付け足します。onload='prettyPrint()'>例としてこんな感じに。→カスタムCSSの追加で、スタイルを好みに合わせます。■最後に、好みのスタイルで表示するように、カスタムCSSからコードを追加します。プレビューがリアルタイムで見られるので、変更に便利です。auto}今、わたしが設定している内容がこんな感じです。(2012/04/30現在)・バックグラウンドの色を変え(投稿記事の背景色と合わせています)・radiusで枠線に丸みを付けています。←これはCSS3の設定なので、IEでは確か反映されません。pre-wrap」】を参考して、追加しました。スタイルは、以下のサイトでサンプルが見られますので、それぞれのCSSを参考にするといいと思います。Prettify」ウィジェット】クリボウさんのサイトで、コード変換用javaを使わせて頂いてます。linenums">このようにすると行番号が表示されます。元のままで使えば、行番号は付かないので、使い分ける場合はそのようにどうぞ。参考にさせて頂いたサイトの方々、ありがとうございました!参考になった方はシェアしてくださると嬉しいです!https://www.sunabox.net/2012/04/bloggergoogle-code-prettify.html[blogger]ブログにコードを見やすく貼る。Google-code-prettify導入しました。Twitterのフォローはこちらから!■Twitterによる更新情報などのつぶやきもおこなっております。HomeSocialProfileすなふここは、GoogleChromeの事やbloggerの事等を軸としながら、気になった事を、何も気にせずに書いていこう、そんなブログです。Twitterアカウントのフォロー、ブログについてのコメント、メール等いつでも待ってます。30days)綿向山登山!すっかり登山者気分に浸れる雰囲気と、歩きやすい道が気持ちよかった![Windows7]ゴミ箱をタスクバーに移動する方法!デスクトップにアイコンを置きたくない人に最適です。Tweetbotや他のアプリの通知が表示されない!そんな時の対処法の1つをご紹介。【ほぼ滋賀県】去年の秋から登山を始めた私がご紹介したい7つの山。miniも新しく!2011モデルとの比較表。[blogger]下から上まで一気に飛ぼう!「ページトップに戻る」ボタンを付ける。