ソースの整形表示 SyntaxHighlighter Evolved
最終更新日:
使い方
プラグイン新規追加で「SyntaxHighlighter Evolved」をインストール。
インストール後プラグインを有効化してとりあえず完了。
※細かい設定はプラグインの「設定」からいろいろ変更可能。
※ちなみにこのブログではv2を使用(v3ではツールバーが出なくなってるから)
ソースコードに対して、[言語]~[/言語]とマークアップ。
※[ ]←これは半角
たとえば、
[html] ~ [/html]の場合
<br /> <br />
が↓こんな感じに整形表示
<br /> <html><br /> <head><br /> <title>テスト</title><br /> </head><br /> <body><br /> <p>本文</p><br /> </body><br /> </html><br />
パラメータ一覧
lang または language | ハイライトするコードの言語。パラメータ指定だけでなく[php]code[/php]のように言語をタグとしても記述可能。 |
---|---|
autolinks | 自動リンクの有効・無効 例: [html autolinks=”false”] ※falseを指定すると自動リンクの解除 |
classname | コードボックスに追加するCSSのclass 例: [html classname=”test”] |
collapse | コードボックスをデフォルトの状態で閉じるかどうか。 例: [html collapse=”true”] ※trueを指定すると折り畳んで表示 |
firstline | 行番号の出力の際に、開始する行番号の指定 例: [html firstline=”10″] ← 10から行番号開始 |
gutter | 左側に行番号を配置するかどうか 例: [html gutter=”false”] ※falseを指定すると行番号を非表示 |
highlight | 行を強調させる(カンマ区切りで複数選択)。 例: [html highlight=”1,10″] ※範囲でも指定可能→[html highlight=”1-10″] |
htmlscript | HTML/XML をハイライトするかどうか。HTMLウェブページで PHP を使うようにHTML/XMLとプログラムが混在するような時に有効。 ※特定の言語でしか動作しません。 |
light | 行番号やツールバーを無効にする軽い表示モードのオン・オフ 例: [html light=”true”] ※trueでシンプル表示 |
padlinenumbers | 行番号の余白。false(余白なし), true (自動)、数値(余白) |
title (v3のみ) | コードの前に表示される表題テキスト。 |
toolbar | ツールバーのオン・オフ(v2のボタン、v3のクエッションマーク) 例: [html toolbar=”false”] ※falseでツールバー非表示 |
wraplines (v2のみ) | 折り返しの有効・無効 例: [html wraplines =”false”] ※falseで折り返し無効 |
指定できる言語一覧
- 言語 ——- 指定名
- ActionScript3 ——- as3, actionscript3
- Bash/shell ——- bash, shell
- C# ——- c-sharp, csharp
- C++ ——- cpp, c
- CSS ——- css
- Delphi ——- delphi, pas, pascal
- Diff ——- diff, patch
- Groovy ——- groovy
- JavaScript ——- js, jscript, javascript
- Java ——- java
- JavaFX ——- jfx, javafx
- Perl ——- perl, pl
- PHP ——- php
- Plain Text ——- plain, text
- PowerShell ——- ps, powershell
- Python ——- py, python
- Ruby ——- rails, ror, ruby
- Scala ——- scala
- SQL ——- sql
- Visual Basic ——- vb, vbnet
- XML ——- xml, xhtml, xslt, html, xhtml
デザインカスタマイズ
デザインを変えたいときはCSSである程度変更可能。
CSSの場所は
「wp-content」→「plugins」→「syntaxhighlighter」→「syntaxhighlighter2(※v2を使っているから)」→「styles」フォルダ
の中にあるCSSファイルの中から
使用しているテーマのCSSファイルを編集。
※使用しているテーマが「Default」なら「shThemeDefault.css」というファイルを編集。
(念のため元データのバックアップは忘れずに!)
WordPressのおすすめ参考書
bookfan 1号店 楽天市場店
¥3,300 (2024/03/26 18:51時点 | 楽天市場調べ)
ポチップ
ポチップ