【WordPress】<>をソースコードとしてハイライト表示させる方法!文字をすべて変更して置き換える

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

ソースコードをハイライトとして表示させる方法と文字をすべて変更して置き換える方法について解説していきます。こんな感じです。

<pre class="prettyprint"><center>中央揃え</center>
<div style="text-align:center">中央揃え</div></pre>

 

ソースコードをハイライトとして表示させる方法では、WordPressでHTMLを編集できる状態にしておいてください。

Classic Editorをインストール・有効化した状態で、固定ページまたは投稿ページのテキストを開きます。

文字をすべて変更して置き換える方法だけみたい場合は目次で一気にジャンプしてください。

 

スポンサーリンク

【WordPress】<>をソースコードとして表示させる方法!文字をすべて変更して置き換える

 

このようなHTMLを表示できないで困ったことはないでしょうか。

そんなときは

<は&lt;

>は&gt;

を代わりに使うとソースコードをハイライトできます。

全部変更するのは面倒なので、詳しくは文字を次の章の方法で置換させましょう。

 

 

文字を置換させたら、次はハイライト表示です。

ソースコードをハイライトとして表示させたい場合は<pre class=”prettyprint”></pre>というタグを使います。

このタグだけは

&lt;

&gt;

 

を使わないので注意してください。

上記のようにハイライトさせたい部分のソースコード全体を<pre class=”prettyprint”></pre>で囲みましょう。

スポンサーリンク

文字をすべて変更して置き換える方法

同時に文字をすべて変更して置き換える方法も解説します。

これが使えると同じ文字を一気に変更できるので便利です。

Bracketsというアプリケーションを使います。

上部のメニューの「検索」から「置換」をクリックします。

変更したい文字「<」

・変更後の文字「&lt;」

 

の順に入力しましょう。

すると、すべての「<」という文字(記号)が「&lt;」に置き換わりました。

この調子で、「>」も「&gt;」に変更しましょう。

 

タイトルとURLをコピーしました