ワードプレスにソースコードを表示させるプラグイン【SyntaxHighlighter】

公開日: : 最終更新日:2012/11/23 副業で稼ぐ仕組みの作り方

ワードプレスにhtmlタグなどのソースコードを記入した際にわかりやすくする為のプラグインです。

はじめに

SyntaxHighlighterは個人的な使い方としてはJavaScriptのコードやhtmlやcssのコードのメモとして使用する事が多いですかね。もしくは見る側がソースコードをコピペしやすいようにする為のプラグインと言っても過言じゃないかもしれませんね。

もくじ

  1. ダウンロードしよう
  2. SyntaxHighlighterの使い方
  3. htmlを記入してみよう
  4. cssを記入してみよう
  5. コードをハイライト
  6. 見栄えをかえてみよう
  7. さいごに

注意事項

SyntaxHighlighterのプラグインは似ているのが多いのでインストールする際に間違わないように気を付けよう

ダウンロードしよう

ワードプレス内からのダウンロードをお勧めします

管理画面 > プラグイン > 新規追加 > SyntaxHighlighter Evolved

で検索し、インストールしてください。

インストールが終わると必ずプラグインを有効にして下さいね。

SyntaxHighlighterの使い方

使い方はとっても簡単

基本的には使いたい言語によって変わるのですが[使う言語][/使う言語]とタグで閉じるイメージです。

htmlを使いたい場合

[html]

ここにhtmlを記入する

[/html]

※[ と ]は必ず半角で記入して下さい。

このように使いたい言語をカッコでくくるだけで使用出来ます。

htmlを記入してみよう

個人的なメモでもhtmlは使う頻度が多いかもしれないですね。

ここに直接コードを記入すると

<html>

<p class=”kurage”>そんな事よりくらげの話でもしようぜ</p>

</html>

となります。それをSyntaxHighlighterを使って表記すると


<p class="kurage">そんな事よりくらげの話でもしようぜ</p>

となります。

一行程度だと分かりにくいですが、長いコードになると文章に埋もれる事が多いので自分のメモとして使用する場合でもSyntaxHighlighterを使う事をお勧めします

cssを記入してみよう

cssは気に入った、かつ直に打てないようなコードのメモに

cssを直接入力した場合

p.kurage {

font-size:20px;

font-weight:bold;

color:#F00;

margin:10px;

text-align:center;}


p.kurage {

font-size:20px;

font-weight:bold;

color:#F00;

margin:10px;

text-align:center;}

となります。どうですか?先ほどのhtmlの一行のコードに比べると長いのでわかりやすいと思います。Java Scriptなどの長いコードだとかなり見やすくなりますのでお勧めします。ちなみに先ほど入力したのはこのように表示されます。

そんな事よりくらげの話でもしようぜ

コードのをハイライト

それこそ長いコードを使用する際に使いたいですね

一部をハイライトする場合
例えば3行目と7行目をハイライト

[css highlight=”3,7″]
cssを記入
[/css]


p.kurage {

font-size:20px;

font-weight:bold;

color:#F00;

margin:10px;

text-align:center;}

範囲をハイライトする場合
例えば3行目から7行目をハイライト

[css highlight=”,3-7″]
cssを記入
[/css]


p.kurage {

font-size:20px;

font-weight:bold;

color:#F00;

margin:10px;

text-align:center;}

※範囲の場合は何故か,(カンマ)をつけないと表示されませんでした。

見栄えをかえてみよう

デザインによって色合いを変えられる

ブログのデザインの事を考え、何パターンかデザインと言うか色合いを変える事が可能です。

管理画面 > 設定 > SyntaxHighlighter

この中のテーマを変える事で見栄えを変えられます。

Default

Django

Eclipse

これ以外にもテーマはあるのでお好きなテーマをお選びください。

さいごに

自分のメモとして使うだけでもやっぱり見やすい方が良いなぁって事でこのプラグインを入れました。最低限自分が見やすい物を制作しないと意味がないなと思い、プラグインを導入する事にしました。

関連記事

コンタクトフォーム7からの迷惑メールを防ぐ方法

コンタクトフォーム7を入れたけど、今度はここから迷惑メールが来ることが増えます。迷惑メールをブロック

記事を読む

phpとワードプレスのランダム表示

副業で広告やバナーを掲載する時にランダム表示をしたいなぁって時に役立つ内容を紹介します。 はじめに

記事を読む

エックスサーバーからさくらサーバーにドメインを移管してみた

エックスサーバーからさくらに移管しているって情報が少なかったので自分のメモとしてやってみました は

記事を読む

無料アクセス解析 ace-analyzerの登録方法

完全無料で使えるアクセス解析 ace-analyzerの登録方法をご紹介いたします はじめに

記事を読む

gmailからサクラのサーバー経由でメールが送れない

サクラ、Mail Delivery SubsystemとDelivery Status Notifi

記事を読む

Jetpackのメール記事投稿

メールから簡単にブログの投稿をする事が出来るJetpackのメール記事投稿機能のご紹介です。 はじ

記事を読む

自動的にホームページがIE7の表示になってしまう対応方法

制作したホームページが何故かIE7の表示になってしまう場合の対策をご紹介します。 はじめに ホー

記事を読む

スパムコメントを自動で削除してくれるAkismet

ワードプレスをインストール時に最初からインストールされているAkismetの使い方をご紹介いたします

記事を読む

ECキューブ2.11.5のインストール方法

ショッピングサイトの構築をするならECキューブと言うことで今回はインストール方法をご紹介致します。

記事を読む

tinymce advancedで絵文字もフォントサイズも可能に

ワードプレスって、顔文字が使えなかったり、フォントサイズがいじれなかったりと日本人のブログとしては微

記事を読む

Message

現在の総記事数: 312件

Contact Form 7のエラー項目を分かりやすく方法

Contact Form 7を利用している方でエラー項目をよりわかりや

アドセンスのポリシー違反を解除する方法

ある日アドセンスから英語のメールが届きました はじめに アドセンス

SEO対策はコンテンツだけで勝負してみた結果

SEO対策にもう被リンクは本当に必要がないのか実際にテストしてみました

Huluのここがクソ!色々改悪されすぎ

Huluを契約して2年経過しましたが、使いにくくなりすぎてもう解約しま

SBIの貸株を解除する方法

SBI証券で貸株をしている人で解除方法がわからない人に

→もっと見る

PAGE TOP ↑