HTMLでコードをコードっぽく表示させたい

Question

teratailやプログラミングに関するサイトなどでよくコードが表示されていますがこれはどうやってやるのですか？

print("hello")

上のような感じのやつです。

Answer 1

HTMLには<code>タグと<pre>タグです。
codeタグでブラウザにコードであることを伝えます。ブラウザはそれを見て翻訳時に変更するかなどを決めます。
preタグは文章のスペースやタグ、改行をそのまま表示します。
見た目はcssで変更しています。

Answer 2

基本は<code>と<pre>を使うことを推奨したいです。

あとはデザインの工夫だけですね。

このページが参考になると思います。

codeタグ：コードを表す | HTMLリファレンス

Answer 3

マークダウン　です。

いろんな言語でライブラリが提供されているので自前でするよりライブラリ使うのが吉です。