MD.WEBLOG

長野県飯田市、フリーランス、ウェブデザイン、ホームページ制作、CMS構築、映像制作、エディトリアルデザイン - MITAMA DESING -

Go To Home

Blog

blogトップ > WordPress > 「SyntaxHighlighter Evolved」でWordPress投稿時にソースコードを簡単ハイライト!【使い方】


「SyntaxHighlighter Evolved」でWordPress投稿時にソースコードを簡単ハイライト!【使い方】

 2012年11月14日   タグ: , ,

「SyntaxHighlighter Evolved」でWordPress投稿時にソースコードを簡単ハイライト!【使い方】
技術系のブログを運営している場合などに、抜群の効力を発揮します。エントリーにソースコードなど簡単に表示することができるので、 先に紹介した、「AddQuicktag」と組み合わせることで、ボタン一つで、ソースコードを入力することができます。技術系ブログには必須のプラグイン「SyntaxHighlighter Evolved」の使い方を説明します。

「SyntaxHighlighter Evolved」をWordPressにインストール

「SyntaxHighlighter Evolved」をインストールして、有効化しましょう。

WordPress のプラグインをインストールする方法

「SyntaxHighlighter Evolved」ダウンロードはコチラ

「SyntaxHighlighter Evolved」の使い方【設定など】

「SyntaxHighlighter Evolved」を有効化すると、WordPress管理画面の左メニュー「設定」に「SyntaxHighlighter Evolved」が追加されます。

「SyntaxHighlighter Evolved」の設定画面で、テーマの変更、バージョンの変更など、各種の設定を変更できます。

管理画面で設定できる項目

  • Highlighter Version: バージョンを選択する
  • Color Theme: テーマを変更する
  • Load All Brushes: すべての言語ファイルを読み込む
  • Miscellaneous:Display line numbers: 行番号を表示する
  • Display the toolbar: ツールバーを表示する
  • Automatically make URLs clickable: 自動でリンクする
  • Collapse code boxes: 折りたたみ表示する
  • Use the light display mode, best for single lines of code: シンプルに表示する
  • Use smart tabs allowing tabs being used for alignment: スマートタブの使用する
  • Wrap long lines (disabling this will make a scrollbar show instead):コードを折り返す
  • Additional CSS Class(es): クラス名の追加する
  • Starting Line Number: 開始行番号を指定する
  • Line Number Padding: 行番号のパディングを設定する
  • Tab Size: タブのサイズを指定する

使える言語の種類

「SyntaxHighlighter Evolved」の公式サイトによれば、以下の言語に対応しているとのことです。

「SyntaxHighlighter Evolved」公式サイトはコチラ

actionscript3、bash、clojure、coldfusion、cpp、csharp、css、delphi、erlang、fsharp、diff、groovy、html、javascript、java、javafx、matlab (keywords only)、objc、perl、php、text、powershell、python、r、ruby、scala、sql、vb、xml

「SyntaxHighlighter Evolved」の使い方【導入してみる】

WordPress投稿画面のソースコードに[言語名]ソースコード[/言語]で表示できます。 それでば、言語をHTMLで、実際に表示してみます。

通常表示

[html]

<html dir="ltr" lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<title>デモサイト02</title>
<link rel="profile" href="http://gmpg.org/xfn/11" />

開始する行数を指定する

[html firstline=”5″]

<html dir="ltr" lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<title>デモサイト02</title>
<link rel="profile" href="http://gmpg.org/xfn/11" />

自動リンク設定を解除する

[html autolinks=”false”]

<html dir="ltr" lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<title>デモサイト02</title>
<link rel="profile" href="http://gmpg.org/xfn/11" />

行数を非表示にする

[html gutter=”false”]

<html dir="ltr" lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<title>デモサイト02</title>
<link rel="profile" href="http://gmpg.org/xfn/11" />

指定の行をバイライトさせる(カンマで複数行ハイライト可能)

[html highlight=”1,3″]

<html dir="ltr" lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<title>デモサイト02</title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
このエントリーをはてなブックマークに追加

  |  Blog TOP   |