HTMLやCSSの「ソースコード・言語・タグ」をそのまま表示するプラグイン【SyntaxHighlighter Evolved】

HTML画面

WordPressでソースコードをきれいに表示したい場合に便利なプラグインです。ブログでソースコードを伝える記事を書く場合には必須となります。僕はWEBデザインに関してはまったくの素人!!備忘録的にいろいろ記載していきたいので、利用させてもらっています。

使うのは、「SyntaxHighlighter Evolved」というプラグインです。
表示する際のデザインも豊富なので便利です。

SyntaxHighlighter Evolvedのプラグインを追加

WordPressの管理画面から「プラグイン」を選択し、「新規追加」をクリックします。
そうすると右側に「プラグインの検索」というところがあるので、そこに「SyntaxHighlighter Evolved」と入力します。出てきたのものをインストールして、有効化します。

設定

私の場合の設定ですが、
SyntaxHighlighter Evolved

  • SyntaxHighlighterのバージョン:バージョン2を利用しています。
  • テーマ:Defaultのままとしています。ここを変えるとソースコードの表示が変わります。
  • 規定の設定:その他の設定もいじらずそのまま利用しています。

使用方法

使用方法はめっちゃ簡単で、そのまま記事にコードを書き込んで、どの言語か記載するだけです。シンプルでいい♪

  • HTMLのソースコードを表示させたいときは
    ta1でコードをはさみます。
  • CSSのソースコードを表示させたいときは
    ta2でコードをはさみます。
  • PHPのソースコードを表示させたいときは
    ta3でコードをはさみます。

表示

これでソースコードがきれいに表示可能になります。
たとえば、こんな感じ記事に記載すると
ta4
ブラウザ上ではこういった表示になります。



<h1>h1タグはこうやって使います</h1>




<h2>h2タグはこうやって使います</h2>


編集やコピペができて便利です。これからも利用していきたいと思います。

 

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

IROKAN

投稿者: IROKAN

IROIROKANSATSU創業者のIROKANです。面白いネタ、役立つネタを提供できればと思います。もっとーは「シンプルであること」。常にシンプルでわかりやすい記事を更新していきます。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です