アフィリエイト広告を利用しております。
参考サイトの記載がある場合はそちらの方がより詳しく記載説明がされているのでぜひそちらもご覧ください。
そのままコピペしても反映されないものもあります。サイトごとに変えないといけない箇所がありますので修正してください。

WordPress プラグイン

[SyntaxHighlighter Evolved]でコードを簡単に表示させる

[SyntaxHighlighter Evolved]プラグインを使って簡単にコードをホームぺージ上に表示することが可能です。
通常[pre]を使って表示させると思いますが、うまくいった試しがないし空白コードや改行コードをいちいち入れないといけないと面倒くささがあります。
また左に行数を表示するなどおしゃれに作るのは大変です。
それを一発解決するのが[SyntaxHighlighter Evolved]プラグインになります。
見栄えは以下の通りになります(CSS)。

.over-width {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}
参考サイト:https://netaone.com/wp/syntaxhighlighter-evolved/

おすすめ記事

1
制作理由 ワードプレスのクラシックエディタを直接使っているといつも思うことがありました [Tab]キー押して空白入れて見やすくインデントしたい! この記事を書くまでは入れないか、スペースキーを押して誤 ...
2
制作理由 ワードプレスのクラシックエディタを直接使っているといつも思うことがありました コード追加ボタンを自由に追加出来たら便利じゃない? この記事を書くまでは、クリップボード貼り付けアプリ[Clib ...
3
アプリ制作するに至った理由 納品代行の仕事をしていて思ったことがあります 納品代行をしていると本当に様々なお客様から様々な商品が届きます その中でも特に注意しているのが、「見た目ほぼ同じだけど違う商品 ...

-WordPress, プラグイン
-