LoginSignup
5
7

More than 5 years have passed since last update.

はてなブログ+Markdown記法でわかりやすいコード表示方法

Last updated at Posted at 2012-12-26

といっても code, pre に自分で CSS を定義するだけですが。

参照元:http://stackoverflow.com/questions/9045677/css-help-how-to-format-code-block-and-code-line

管理画面「デザイン」→「デザインテーマ」で選択できる8種類のどのテーマでも、残念ながら現時点では Markdown コード記法に対応したハイライト表示がされません(フィードバックは提出済み)

管理画面「デザイン」→「カスタマイズ」→「デザインCSS」欄、デフォルトで定義されている

on_default.css
/* <system section="theme" selected="bordeaux"> */
@import "/css/theme/bordeaux/bordeaux.css";
/* </system> */

/* <system section="background" selected="a0a0a0"> */
body{background:#a0a0a0;}
/* </system> */

‥の下へ、たとえば以下の defined_by_you.css のような内容を貼り付けて保存する

2014/03/21追記:今更ですが、より正確には pre.code { } に指定するのがよいようです(下記のままでも適用はされます)

defined_by_you.css
code {
  font: 12px Monaco,"Courier New","DejaVu Sans Mono","Bitstream Vera Sans Mono",monospace;
  color: #52595d;

  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;

  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;

  border: 1px solid #ccc;
  background-color: #f9f099;
  padding: 0px 3px;
  display: inline-block;
  margin: 2px;
}

pre {
  border: 1px solid #cacaca;
  line-height: 1.2em;
  font: 12px Monaco,"Courier New","DejaVu Sans Mono","Bitstream Vera Sans Mono",monospace;
  padding: 10px;
  overflow:auto;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  background-color: #FAFAFB;
  color: #393939;
  margin: 2px;
}

ブログ本文中の
`one line code` や

```
first line include code
this line also code
```
の見映えを自分で定義できます。好みによって背景色 background-color: #f9f099; や角丸の径 border-radius: 3px; を変えるとよいかもしれません。

5
7
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
7