Jump to content

User:Remember the dot/Syntax highlighter/ja

From mediawiki.org
Languages:
English  • català • Deutsch • español • français • Ido • 日本語 • українська • 中文
リッチな書式設定を行うためにソース コードで使用される <syntaxhighlight> タグと混同しないでください。

これは、編集ボックス内で構文を色付きで目立たせるスクリプトです。wikEd、AceWikiEditor、CodeMirror などの他の構文強調スクリプトとは異なり、このスクリプトには以下の特徴があります:

  • 入力中に自動的に強調を更新します。
  • 元に戻すボタンややり直しボタンを壊しません。
  • スペル チェックを壊しません。
  • 編集ボックスに影響する他の多くのスクリプトと互換性があります。

インストール

[edit]

スクリプトをインストールする前に、必ず以下の「§ 既知の問題」節を読んでください。

ウィキにインストールされている場合のエンド ユーザー向け

[edit]

構文ハイライターがあなたのウィキでガジェットとして利用可能な場合、個人設定に移動して有効化してください。

ウィキにインストールされていない場合のエンド ユーザー向け

[edit]

ガジェットとしてのインストールが利用できない場合、common.js ページに以下の行を追加してください: 

//syntax highlighter
mw.loader.load('//www.mediawiki.org/w/index.php?title=MediaWiki:Gadget-DotsSyntaxHighlighter.js&action=raw&ctype=text/javascript');

たとえば、英語版ウィキペディアが構文ハイライターをガジェットとして提供していない場合、以下の場所に追加します: 

https://en.wikipedia.org/wiki/User:Your_Username/common.js

ウィキメディア サイトの管理者向け

[edit]

あなたのウィキで、コードを含むページ MediaWiki:Gadget-DotsSyntaxHighlighter.js‎ を作成してください: 

mw.loader.load('//www.mediawiki.org/w/index.php?title=MediaWiki:Gadget-DotsSyntaxHighlighter.js&action=raw&ctype=text/javascript');

次に、ページ MediaWiki:Gadgets-definition‎ に新しい行を追加します: 

*DotsSyntaxHighlighter[ResourceLoader]|DotsSyntaxHighlighter.js

そして、テキストを含むページ MediaWiki:Gadget-DotsSyntaxHighlighter‎ を作成します: 

[[mw:User:Remember the dot/Syntax highlighter|Syntax highlighter]]: 編集ボックス内で構文を色付きで目立たせます。

非ウィキメディア サイトの管理者向け

[edit]

あなたのウィキの MediaWiki:Common.js ページに以下の行を追加してください: 

 //syntax highlighter
 mw.loader.load('//www.mediawiki.org/w/index.php?title=MediaWiki:Gadget-DotsSyntaxHighlighter.js&action=raw&ctype=text/javascript');

ページ MediaWiki:Gadgets-definition‎ に新しい行を追加します: 

* DotsSyntaxHighlighter[ResourceLoader]|DotsSyntaxHighlighter.js

そして、テキストを含むページ MediaWiki:Gadget-DotsSyntaxHighlighter‎ を作成します: 

[https://www.mediawiki.org/wiki/User:Remember_the_dot/Syntax_highlighter Syntax highlighter]: 編集ボックス内で構文を色付きで目立たせます。

MediaWiki 1.22 以降が必要です。

既知の問題

[edit]

互換性

[edit]
  1. ハイライターは、最新バージョンの Firefox で最もよく動作します。
  2. ハイライターは、最新バージョンの Chrome、Microsoft Edge、Safari、Opera ではほぼ常に動作しますが、特定の文字体系で書かれたテキストでは正しく動作しません。特にタイ語や標準チベット語が該当します。
  3. ハイライターは Internet Explorer では動作しません (バグが深刻すぎるため)。これらのウェブ ブラウザーのいずれかが検出された場合、ハイライターは実行を試みることすらしません。
  4. ハイライターは、一部のガジェット、ブラウザー アドオン、およびその他のカスタマイズとは互換性がありません。

解析

[edit]
  1. パフォーマンス上の理由から、ハイライターはすべてのタグが有効な XML であることを要求します。たとえば、<p> タグを開始した場合は </p> で終了し、<br> の代わりに <br/> を使用してください。
  2. パフォーマンス上の理由から、構文ハイライターは '''apostrophe italic'' や ''italic apostrophe''' を処理できません—これらを無効な構文と見なします。代わりに '<i>apostrophe italic</i> や <i>italic apostrophe'</i> の使用を推奨します。
  3. 行の先頭にスペースを置くことで作成された <pre> タグは強調されません。これは、ハイライターが行の先頭のスペースが単にテンプレート内の空白かどうかを判別する賢さを持っていないためです。
  4. __NOTOC__ のような動作スイッチは強調されません。
  5. {{fullurl:}} やテンプレートで作成された外部リンクは強調されません。代わりに [{{fullurl:My page}} external link] が表示され、[{{fullurl:My page}} external link] は表示されません。

その他

[edit]
  1. ハイライターは長い記事を編集する場合に十分に動作せず、20ms 以上遅延すると自動的に無効化されます。この場合、何が起きたかを説明するメッセージが表示され、回避方法やタイムアウトの延長の方法が案内されます。
  2. ハイライターはファイルをアップロードする際には実行されません。
  3. ハイライターは編集テキストボックスに関連する利用者スタイルを上書きすることがあります。

カスタマイズ

[edit]

色

[edit]

ハイライターを異なる色で表示するように変更したり、特定の構文を強調しないようにすることは簡単です。以下の色カスタマイズが利用可能です:

defaultColor 特定の色が定義されていない認識された構文要素用
boldOrItalicColor '''太字''' ''斜体''
wikilinkColor [[ウィキリンク]]
externalLinkColor [http:// 名前付き外部リンク], [http://numbered-external-link.com], http://bare-external-link.com
headingColor ==見出し==, ;小見出し
listOrIndentColor * 箇条書きリスト, # 番号付きリスト, : インデント
signatureColor ~~~~
tableColor {| テーブル |}
templateColor {{テンプレート}}
parameterColor {{{テンプレート パラメーター}}}
hrColor ----
tagColor <タグ>...</タグ>, <タグ/>
commentColor <!-- コメント -->
entityColor &エンティティ;
backgroundColor 編集テキストボックスの背景色
foregroundColor 編集テキストボックス内の文字色

たとえば、ウィキリンクをシアン、外部リンクをオレンジにするには、common.js に以下の内容を追加します (ハイライターをガジェットとしてインストールしている場合、最初の 2 行は省略してください。さもないとウェブ ブラウザーがフリーズします): 

//syntax highlighter
mw.loader.load('//www.mediawiki.org/w/index.php?title=MediaWiki:Gadget-DotsSyntaxHighlighter.js&action=raw&ctype=text/javascript');

syntaxHighlighterConfig = {
    externalLinkColor: "#FFCC66", //オレンジ
    wikilinkColor: "#E6FFFF", //シアン
}

特定の構文を強調しないようにするには、その色を "" に設定します。たとえば、外部リンクの強調を無効にするには: 

//syntax highlighter
mw.loader.load('//www.mediawiki.org/w/index.php?title=MediaWiki:Gadget-DotsSyntaxHighlighter.js&action=raw&ctype=text/javascript');

syntaxHighlighterConfig = {
    externalLinkColor: "",
}

明示的に強調したい構文以外はすべて強調しないようにするには、defaultColor を "" に設定し、強調したい各構文の色を設定します。通常の色にしたい場合は、色を "normal" に設定します。たとえば、タグのみを強調するには: 

//syntax highlighter
mw.loader.load('//www.mediawiki.org/w/index.php?title=MediaWiki:Gadget-DotsSyntaxHighlighter.js&action=raw&ctype=text/javascript');

syntaxHighlighterConfig = {
    defaultColor: "",
    tagColor: "normal",
}

タイムアウト

[edit]

既定の 20ms タイムアウトを置き換える timeout を指定できます。たとえば、入力中のもたつきを許容し、30ms 以上かかった場合にのみ強調を無効にしたい場合は、common.js に以下の内容を追加します: 

//syntax highlighter
mw.loader.load('//www.mediawiki.org/w/index.php?title=MediaWiki:Gadget-DotsSyntaxHighlighter.js&action=raw&ctype=text/javascript');

syntaxHighlighterConfig = {
    timeout: 30,
}

ハイライターをガジェットとしてインストールしている場合、最初の 2 行は省略してください。さもないとウェブ ブラウザーがフリーズします。

非ウィキテキスト タグ

[edit]

<math> や <source> のようないくつかのタグはウィキテキストを使用せず、その結果、これらのタグ内の構文は強調されません。sourceTags をタグ名の配列に設定することで、ソースのようなタグのリストをカスタマイズできます。たとえば、既定のタグに加えて仮想的な <foo> タグ内の構文強調を無効にするには、common.js に以下の内容を追加します: 

//syntax highlighter
mw.loader.load('//www.mediawiki.org/w/index.php?title=MediaWiki:Gadget-DotsSyntaxHighlighter.js&action=raw&ctype=text/javascript');

syntaxHighlighterConfig = {
    sourceTags: ["math", "syntaxhighlight", "source", "timeline", "hiero", "foo"],
}

<pre> や <nowiki> のようなその他のタグはウィキテキストを使用しませんが、文字エンティティ (&nbsp; など) は処理されます。nowiki のようなタグのリストは nowikiTags プロパティで制御されます。たとえば、<abbr> タグ内の文字エンティティのみを強調するには、common.js に以下の内容を追加します: 

//syntax highlighter
mw.loader.load('//www.mediawiki.org/w/index.php?title=MediaWiki:Gadget-DotsSyntaxHighlighter.js&action=raw&ctype=text/javascript');

syntaxHighlighterConfig = {
    nowikiTags: ["nowiki", "pre", "abbr"],
}

どちらの例でも、ハイライターをガジェットとしてインストールしている場合、最初の 2 行は省略してください。さもないとウェブ ブラウザーがフリーズします。

閉じられていない br と hr タグの無視

[edit]

ページ全体がピンクになってしまう閉じられていない <br> や <hr> タグを無視するには、common.js ファイルに以下の内容を追加します。これはパフォーマンスに影響します。著者は明示的に閉じた形式の <br/> や <hr/> を使用することを推奨しています: 

syntaxHighlighterConfig = {
    voidTags: ["br", "hr", "BR", "HR", "wbr", "WBR"],
}

サイト既定値

[edit]

syntaxHighlighterConfig 変数で指定できるすべてのプロパティは、syntaxHighlighterSiteConfig 変数でも指定できます。syntaxHighlighterSiteConfig はサイト既定値用、syntaxHighlighterConfig は利用者設定用です。syntaxHighlighterConfig のプロパティは syntaxHighlighterSiteConfig のプロパティより優先され、syntaxHighlighterSiteConfig のプロパティは組み込み既定値より優先されます。

たとえば、サイトに MediaWiki 拡張機能がインストールされていない場合、ソースのようなタグのサポートを削除したいかもしれません。その場合は、MediaWiki:Gadget-DotsSyntaxHighlighter‎ の末尾に以下の内容を追加します: 

syntaxHighlighterSiteConfig = {
    sourceTags: [],
}

バグ報告

[edit]
注意: 報告したいバグが既に既知の問題でないか確認してください。

私にバグを報告する際には、以下を含めてください:

ソースコード

[edit]

ダウンロード時間を短縮するため、また ResourceLoader が他のウィキからインポートしたスクリプトを自動的に圧縮しないため、MediaWiki:Gadget-DotsSyntaxHighlighter.js 自体は圧縮済み形式で保持されています (jscompress.com にソースコードを貼り付けて結果をコピー)。実際のソースコードは User:Remember the dot/Syntax highlighter.js で利用可能です。

アプローチの概要

[edit]

このスクリプトは、背景用の div である wpTextbox0 を作成し、編集テキストボックスである wpTextbox1 の背後に挿入します。wpTextbox0 と wpTextbox1 はスタイルが同期され、wpTextbox1 の背景は透明に設定されるため、wpTextbox0 が透けて見えます。その後、テキストのブロックが span 要素として wpTextbox0 に追加されます。ブロック上のテキストは透明ですが、ブロックの背景は色付きです。wpTextbox0 で wpTextbox1 と同じテキストを使用することで、動的に構成された文字による位置のずれが排除されます。wpTextbox0 と wpTextbox1 は (理論上) 完全に同期されているため、色付きの背景は利用者に wpTextbox1 に直接追加されたかのように見えます。

wpTextbox0 のテキストは実際には span 要素の textContent に追加されるわけではありません。代わりに、動的に生成された CSS スタイルシートを使用して、各 span の ::after 擬似要素に追加されます。これにより、ブラウザーのページ内検索機能を使用する際の問題を回避できます。textContent を使用した場合、ブラウザーは wpTextbox1 の実際のテキストと wpTextbox0 の透明テキストの両方がページ上に存在すると認識してしまうためです。

Retrieved from "https://www.mediawiki.org/w/index.php?title=User:Remember_the_dot/Syntax_highlighter/ja&oldid=8144927"