【超簡単】賢威7で記事上にソースコードを載せる方法 /WordPress

ともよ
こんにちは!会社員×複業家のともよです☺
プロフィールはこちらから!

SyntaxHighlighter Evolved

 

SyntaxHighlighter Evolvedは、記事の中でソースコードを綺麗に表示できるWordPressプラグインです。プラグインで動作するSyntax Highlighter(シンタックス・ハイライター)です。

 

クラシックエディタ・ブロックエディタの両方に対応しています。ブロックエディタを利用する場合は「Syntax Highlighter」のブロックを利用できます。

 

クラシックエディタを利用する場合は、専用のショートコードを利用してソースコードを記述します。

 

ブログの記事の中で、HTMLやプログラミングのソースコードを解説する機会が多い方は、このプラグインを活用すると役に立ちます。

 

 

 

 

はじめに

このプラグインが優れていること

  • プラグインで動作する「Syntax Highlighter」です。
  • 記事の中でアプリケーションのエディタのようにソースコードを綺麗に表示できる。
  • クラシックエディタを利用する場合は、専用のショートコードの中にソースコードを記述して利用します。
  • ブロックエディタを利用する場合は「Syntax Highlighter」のブロックを利用できる。New
  • エディタの外観を変更できるデザインスキンが複数あり、好きなデザインを選べる。
  • プラグインの管理画面が日本語化されているのでわかりやすい。

 

動作見本

下記は「SyntaxHighlighter Evolved Ver.3.x」が実際に動作する見本です。
記事にソースコードを綺麗に表示することができます。

[php] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="https://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>PHP Code Example</title>
</head>
<body>
<h1>PHP コードサンプル</h1>
<p><?php echo 'Hello World!'; ?></p>
<p>この行をハイライトしています。</p>
<div class="foobar">フッター</div>
<p><a href="https://wordpress.org/">WordPress</a></p>
</body>
</html>
[/php]

 

SyntaxHighlighter Evolvedの導入

ダッシュボードから「プラグイン」→「新規追加」を選択します。

右上の検索バーに「SyntaxHighlighter Evolved」と入力して検索、「いますぐインストール」をクリックします。

インストールが完了したら「プラグインを有効化」をクリックしましょう。

これでSyntaxHighlighter Evolvedの導入が完了しました。

 

複業やってみたい仲間募集^^

わたしは外資系企業に勤め、月100時間を超える残業があるなかで、こつこつ複業やマーケティング・エンジニア・デザイナーの知識を学び、その生活から1年経つ頃には複業の収入が外コン収入を上回っていました。

複業のおかげで今の会社にも出会い、自由な生活と楽しい仕事を手に入れることができています!

ということで、もしこのようなライフスタイルに憧れる方がいたら、ぜひ複業家となるまでお手伝いや協業させてください!

まずはかたい雰囲気はナシでざっくばらんにお話できればと思います^^

このブログはWordPressテーマ「Diver」を使用しています

ともよ
ブログの収益化・効率化を狙うならテーマによるSEO対策や操作性は大事な要素の一つ。

WordPressテーマ「Diver」は初心者にも使いやすく、自分色のブログを作りやすいサイト構造が特長。

人と被るようなブログにしたくない!そんなあなたにおすすめのテーマです。

Diverを使えば、SEO対策はもちろん、ユーザビリティーを考えられたデザインで、サイト回遊率、直帰率、再訪問がアップします。アフィリエイターだってブロガーだって関係無しで、長い間愛されることの出来るコンテンツをDiverなら作成できます!!

Diverの購入はこちらから

おすすめの記事