Warning: Declaration of FEE_Field_Terms::wrap($content, $taxonomy, $before, $sep, $after) should be compatible with FEE_Field_Post::wrap($content, $post_id = 0) in /home/twfs/serverkurabe.com/public_html/blog/wp-content/plugins/front-end-editor/php/fields/post.php on line 0

Warning: Declaration of FEE_Field_Tags::wrap($content, $before, $sep, $after) should be compatible with FEE_Field_Terms::wrap($content, $taxonomy, $before, $sep, $after) in /home/twfs/serverkurabe.com/public_html/blog/wp-content/plugins/front-end-editor/php/fields/post.php on line 0

Warning: Declaration of FEE_Field_Category::wrap($content, $sep, $parents) should be compatible with FEE_Field_Terms::wrap($content, $taxonomy, $before, $sep, $after) in /home/twfs/serverkurabe.com/public_html/blog/wp-content/plugins/front-end-editor/php/fields/post.php on line 0

Warning: Declaration of FEE_Field_Post_Thumbnail::wrap($html, $post_id, $post_thumbnail_id, $size) should be compatible with FEE_Field_Post::wrap($content, $post_id = 0) in /home/twfs/serverkurabe.com/public_html/blog/wp-content/plugins/front-end-editor/php/fields/post.php on line 0

Warning: Declaration of FEE_Field_Post_Meta::wrap($data, $post_id, $key, $ui, $single) should be compatible with FEE_Field_Post::wrap($content, $post_id = 0) in /home/twfs/serverkurabe.com/public_html/blog/wp-content/plugins/front-end-editor/php/fields/post.php on line 0

Warning: Declaration of FEE_Field_Widget::wrap($params) should be compatible with FEE_Field_Base::wrap($content, $data) in /home/twfs/serverkurabe.com/public_html/blog/wp-content/plugins/front-end-editor/php/fields/widget.php on line 0

Warning: Declaration of FEE_Field_Comment::wrap($content) should be compatible with FEE_Field_Base::wrap($content, $data) in /home/twfs/serverkurabe.com/public_html/blog/wp-content/plugins/front-end-editor/php/fields/other.php on line 0

Warning: Declaration of FEE_Field_Term_Field::wrap($content, $term_id, $taxonomy) should be compatible with FEE_Field_Base::wrap($content, $data) in /home/twfs/serverkurabe.com/public_html/blog/wp-content/plugins/front-end-editor/php/fields/other.php on line 0

Warning: Declaration of FEE_Field_Single_Title::wrap($title) should be compatible with FEE_Field_Term_Field::wrap($content, $term_id, $taxonomy) in /home/twfs/serverkurabe.com/public_html/blog/wp-content/plugins/front-end-editor/php/fields/other.php on line 0

Warning: Declaration of FEE_Field_Option::wrap($content, $key, $ui) should be compatible with FEE_Field_Base::wrap($content, $data) in /home/twfs/serverkurabe.com/public_html/blog/wp-content/plugins/front-end-editor/php/fields/other.php on line 0
SyntaxHighlighterでの行番号の指定、およびハイライトの設定方法 | Sabakura Blog

SyntaxHighlighterでの行番号の指定、およびハイライトの設定方法

2011年07月25日

行番号の指定

SyntaxHighlighterでは、1行目の行番号を自由に指定することができます。
たとえばチュートリアル記事などの場合、「○○行目にコードを追加してください」といった手順を書くことがあると思います。このような際にSyntaxHighlighterでも行番号を合わせておくと、より分かりやすくなります。

行番号の指定は、CSSのclass名によって行います。
具体的には、preタグにclassを指定する際に「firstline」という属性および開始行番号を追加設定してます。

見本は以下の通りです。

1
<pre class="brush:html first-line:37">

上記のように設定すると、以下のように開始行番号が37行目になります。

37
38
39
40
<h2>記事タイトル</h2>
<h3>見出し1</h3>
<p>ここに記事本文。</p>
<p>ここに記事本文。</p>

ハイライトの指定

SyntaxHighlighterでは他にも便利な機能として、特定の行をハイライトして目立たせる機能があります。

これも行番号と同様に、「highlight」という属性をclassに指定することで行います。あわせて、[]内にハイライトしたい行番号をカンマ区切りで入力します。
なお、「first-line」で開始時の行番号を指定している場合には、ハイライトする行の番号もこれに合わせてください。

見本は以下の通りです。

1
<pre class="brush:html first-line:37 highlight:[38, 40]">

上記のように設定すると、以下のように38行目と40行目がハイライトされます。

37
38
39
40
<h2>記事タイトル</h2>
<h3>見出し1</h3>
<p>ここに記事本文。</p>
<p>ここに記事本文。</p>

Comment

  1. WordPressプラグイン「Syntax Highlighter」も外せそうなので外してみた | けんけん.com

    2012-02-27 07:01

    […] SyntaxHighlighterでの行番号の指定、およびハイライトの設定方法 | Sabakura Blogvar url="http://serverkurabe.com/blog/syntax-highlighter-setting&quot;; […]

コメントを投稿