Markdown表記では、ソースコードをダブルクウォート3つで囲むとスペース、改行などが考慮された状態でコードを表示できる。
記入例：
```
class Meta:
model = Comment
fields = ('name',)
```
表示例：
class Meta:
model = Comment
fields = ('name',)
上記表示例では、コンテキストハイライトが適用されているため、背景と文字に自動で色が設定されています。
デフォルトではグレーの背景に黒文字のシンプルなデザインになる。
表示例のようにコンテキスハイライトを適用したい場合は、highlight.jsというサービスを利用して以下のようなコードをhtmlに書く必要がある。
<head>
...
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/a11y-dark.min.css">
...
</head>
<body>
...
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
</body>
背景色や文字色のデザインを変更したければ下記サイト左側の「Themes」から自分好みのデザインを探すことができる。
https://highlightjs.org/static/demo/
お気に入りのデザインをみつけたら、下記サイトから選んだ「Themes」に対応するCSSを探し、CSS名をコピー。そして先ほどhead→linkタグの中で設定したCSS名を、コピーしたCSS名に書き換える。
https://github.com/highlightjs/highlight.js/tree/master/src/styles
例えば「A 11 Y Light」を選んだ場合は「a11y-light」をコピーし、先程設定した「a11y-dark.min.css」の「a11y-dark」部分を「a11y-light」に書き換えればデザインが変わる。
（※著者のCSSファイルは変更していないため、デザインは「a11y-dark」のまま変わっていない）
<head>
...
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/a11y-light.min.css">
...
</head>
