2022/06/22¶

html/css codeblockの作成¶

なんとなくcodeblockを作ってみたくなった

preタグについて¶

preformatted textの略
ソースに記述されたスペース、改行等をそのまま等幅フォントで表示

codeタグについて¶

プログラム等のコードであることを示すタグ

htmlでのコード表示¶

コードであることをクローラーやユーザにわかりやすくするために
codeタグで囲む必要がある
複数行にわたるコードを表示したい場合は、
preタグを利用することでその改行、スペースをそのまま表示することができる

つまりインラインコードとして利用する場合

<code>print('hello world')</code>

※ただし、インライン利用にはp,li等codeを囲うタグを決めてCSSを記述しないと、インラインコードとコードブロックのcssが競合しそうなので気を付けたほうがよさそう

複数行にわたるコードとして利用する場合

<pre><code>
def hello():
    print('hello world')

if __name__ = '__main__':
    hello()
</code><pre>

のように利用するのがよい

highlight.jsの利用¶

highlight.jsの読み込み
link内hrefのdefaultの部分をgithubリポジトリ内の別のスタイル名にすると、そのスタイルを適用できる

<!--head内-->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/styles/default.min.css">

<!--/bodyの直前-->
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js"></script>

<pre><code>....</code></pre>内のテキストを呼んで、どの言語が自動で認識しhighligtを付けてくれる

background-colorのプロパティを持っているのはcodeタグなので、codeタグのcssを変更することによりコードブロックを自由にスタイリングすることができる

/*インラインコードはhighlight.jsが適用されないので、独自にbackground-colorを付ける(ハイライトなし)*/
p code{
    background-color: whitesmoke;
    border-radius: 5px;
    margin-left: 0.5em;
    margin-right: 0.5em;
}

/*highlight.jsによる装飾がなされたhtmlだけをスタイリングしたいのでpreの子要素となるcodeのみにスタイリング*/
pre code{
    border-radius: 10px;
    margin-right: 1em;
    margin-left: 1em;
}

左右にマージンを入れることによって窮屈間の緩和
インラインコードは半角、コードブロックは全角分のmarginを入れた

まとめ¶

highlight.jsを使うと楽にコードブロックがつくれる！
インラインコードは自作スタイルを適用するのがいい

検索用タグ¶

html, css, コードブロック, highlight.js