ワードプレスにソースコードを表示させるプラグイン【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

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

さいごに

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

広告

関連記事

ECCUBE2.4のインストール時にエラーが出た場合

プラグイン側が2.4のサービスの提供を終了してきていますね。 はじめに そろそろECCUBEのバ

記事を読む

ワードプレスにグーグルアドセンスを導入する方法

ワードプレスにアドセンスを導入する際に効率の良い導入方法をご紹介いたします。 アドセンスの設定をす

記事を読む

amazonのインスタントストアの商品登録方法

前回紹介したAmazonインスタントストアでの商品登録方法の紹介 はじめに Amazonイン

記事を読む

no image

副業するなら情報を売ろう

もしも、副業をするなら一番お勧めの方法は情報を売る事です。お勧めの理由はPC一台あれば出来ると言うと

記事を読む

さくらサーバーにドメインを移す【移管方法】準備

ドメインを初めて移す方は不安ではありませんか?今回はさくらサーバーへの移管方法を詳しく説明させて頂き

記事を読む

2017年最新版 メルカリで受取評価してくれない時の対策

メルカリを利用していると変なお客さんにあたる場合があります メルカリに関する記事 メ

記事を読む

no image

圧縮と解凍のインストール

知り合いに電話で「圧縮してからファイルを送って」と言った時に圧縮と言う言葉を知らない人が多いんだなと

記事を読む

投稿のビジュアルにcssを反映させる

ビジュアルと実際のデザインが違うんだが・・・・ はじめに 自作のテーマを使った場合、ワードプレス

記事を読む

contact form 7を全ページに表示させ記事と連携させる方法

コンタクトフォーム7を使って記事や固定ページと連携させる方法をご紹介いたします。 はじめに ショ

記事を読む

サブドメインの設定【サクラサーバー】

今回はサブドメインの設定方法です。サブドメインを設定する事で様々なメリットがございます。副業で使う際

記事を読む

広告

Message

広告

現在の総記事数: 308件

no image
SBIの貸株を解除する方法

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

Gooogleの著作権侵害による削除依頼をしてみた

ある日うちが取り扱いをしている商品が詐欺サイトに掲載されていたので早速

WordPressが書き換えられた時の対処方

アクセス先のサイトで「不正なソフトウェアを検出しました」と表示されると

さくらインターネットの請求書払い反映されるまで

さくらインターネットで支払い方法を請求書払い(コンビニ払い)にしている

HEIC形式を簡単にjpgにする方法

web上でクッソ簡単にjpgに戻せました はじめに ア

→もっと見る


  • ここでは副業での稼ぎ方や、誰でも簡単に稼げる副業のジャンルなどを紹介しております。 今の所、平均して月に15,000円ほど副収入があります。
    • エステコスメ エステ化粧品やエステコスメの通販サイトです。一般の方でもエステサロンで使用しているコスメを激安価格で購入出来ます。
    • エステ用品 エステ用品のMOCOエステです。新規開業を考えているエステサロン様向けに卸価格でご提供させて頂きます。
    • サロン集客 サロン集客に悩んでいる人向けに完全無料で集客方法を公開しております。インターネットを使う事で0円でサロン集客する方法もお教えいたします。
    • ヒートマット 遠赤外線ヒートマットシリーズは入ると滝に打たれたような発汗を体験できます。サロン様から一般の方までご利用いただけます
    • フェイシャルスチーマー 業務用だけでなく、一般の方も使用出来るフェイシャルスチーマーを詳しく説明しているホームページです。
    • 美容室のホームページ制作 美容室やエステサロン、ネイルのホームページ制作です。3万円台から制作も出来るので予算のないサロン様にも対応しております。
PAGE TOP ↑