2週間前に投稿

WordPress でインラインコードをコードっぽく表示させたい

この記事は約 5 分で読めます。

最近、
プログラミング関連の記事を
多く書くようになりました。
それに伴いインラインコードも
多用するようになったのですが、
見た感じ、
大して代わり映えしないんですよね。

それなりにならないかな?
と思い調べました。

codeタグとは

codeタグは、
プログラムなどのコードであることを示す際に使用します。
codeタグで囲まれたところに書き込んだ内容が、
プログラムのソースコードであることを意味します。
codeは文中でコードを紹介するときによく使います。
多くの場合は段落やリストなどの文中で使用します。

WordPress でインラインコードを使う

WordPress でインラインコードを使うには、
ブロックエディタで、
ツールバーからインライン装飾にて
インラインコードを指定します。

そうすると、ハイライトしたい箇所がcodeタグで囲われました。

だけど、
これだけだと大して見た目が
変わらないんですよね (汗

プログラミングに関するサイトを調べてみた

Qiita」や「MDN Web Docs」などの
codeタグの装飾はどうなっているのか?
調べてみました。

Qiita

Qiitaでは
$foobarのようになります。

code {
  background-color: #eee;
  color: #333;
  padding: 0.1em 0.4em;
  font-family: "SFMono-Regular",Consolas,"Liberation Mono",Menlo,Courier,monospace;
}

MDN Web Docs

MDN Web Docsでは
$foobarのようになります。

code {
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  font-family: consolas,"Liberation Mono",courier,monospace;
  padding: 0 3px;
  white-space: nowrap;
  word-wrap: break-word;
  background-color: #f4f4f4;
}

DEV Community

DEV Communityでは
$foobarのようになります。

code {
  background: rgba(0, 0, 0, 0.1);
  color: #090909;
  border-radius: 0.375rem;
  max-width: 100%;
  font-size: 80%;
  padding: 0.1em 0.25em;
  font-family: 'SF Mono',SFMono-Regular,Consolas,'Liberation Mono',Menlo,Courier,monospace;
}

teratail (テラテイル)

teratailでは
$foobarのようになります。

code {
   background-color: #f7f7f9;
   border: 1px solid #e1e1e8;
   border-radius: 2px;
   box-sizing: border-box;
   max-width: 100%;
   font-size: 12px;
   color: #c25;
   padding: 2px 3px 2px 5px;
   margin: 1px 2px;
   vertical-align: baseline;
   overflow-x: scroll;
   white-space: pre-wrap;
   line-height: 2em;
}

上記、調べたサイトでは
それぞれ微妙に違うけれど
共通しているのは背景色を
グレーにしている点と
文字色、コードのフォントを
変更している点でしょうか。

foobar(フーバー)とは、
主に欧米で使用されるメタ構文変数の一つ。
プログラミング言語の記述で使われる識別子の一種で
サンプルプログラムなどで
意味のない名前が必要な場合に利用される。

シンタックスハイライターブロックを使うと

インラインコードを使う
プログラムに関する記事ならば、
シンタックスハイライターブロックも
併せて使う事もあるかと思います。

code {
  /* cssの内容 */
}

上記のようなCSSコードだと、
シンタックスハイライターブロックと
コードブロックまで
背景色が変更されてしまいます。

これは、
シンタックスハイライターブロックと
コードブロックにも
codeタグが使われているためです。

解消するには、
:not(pre)>codeのように、
インラインコードで表示したいところだけを
指定してあげればよいようです。

結局、どうすりゃいいん?

上記を総合すると、
最終的に以下のようにすると
よいのかな?と思います。

(あくまでも個人的にです。)

:not(pre) > code {
  display: inline-block;
  margin: 0 .3em;
  padding: 0.1em 0.25em;
  color: #333;
  background-color: #f4f4f4;
  border-radius: 0.375rem;
  font-family: "SFMono-Regular",Consolas,"Liberation Mono",Menlo,Courier,monospace;
  line-height: 1.4;
}

display: inline-blockがないと
paddingmarginなどの余白の調整が
反映されないようなので
注意が必要です。

参考文献

最後に

貴重なお時間を割き、
最後まで
ご高覧いただきまして
有難うございました

WordPress でインラインコードをコードっぽく表示させたい