はてなブログ : コードハイライトの設定・使い方

設定したらどうなるのか

<?php
  if(true){
    echo "hoge"; 
  }
?>

↑これが

<?php
  if(true){
    echo "hoge"; 
  }
?>

↑こうなります(あくまで当ブログの場合)

コードハイライトの設定

・「はてなブログ」の管理画面→「デザイン」→「カスタマイズ(トルクアイコン)」→「デザインCSS」
　「デザインCSS」にて下記をコピペする

/*CSS設定_コード背景色*/
pre.code{
    margin: 0 0 1.5em 0;
    padding: 1em;
    border: 1px solid #e4e4e4;
    background: #f8f8f8;
    border-radius: 2px;
}

・トップ画面で「記事を書く」→「編集」の「∨」をクリックして「はてな記法」
　記事内容に下記を入れて動作確認する。

>|php|
<?php
  if(true){
    echo "hoge"; 
  }
?>
||<

　自分の好みに合わせて前述の「デザインCSS」の記載を書き換える。
　行間を変えたい場合は「line-height: 1.4;」みたいに追加するといいかと。

コードハイライトの使い方

　編集の「見たまま」ではコードハイライトが使えません。
　コードハイライトしたい場合は「はてな記法」か「Markdown」をお使いください。

「はてな記法」でのコードハイライトの使い方

>|javascript|
<script>
  document.write("例");
</script>
||<


>|使用言語を半角小文字で記載|
コード
||<

ネタ元様
redo5151.hatenablog.com