Community Tech/Wikitext editor syntax highlighting/ja

From Meta, a Wikimedia project coordination wiki
Jump to: navigation, search
This page is a translated version of the page Community Tech/Wikitext editor syntax highlighting and the translation is 100% complete.

Other languages:
العربية • ‎Deutsch • ‎English • ‎Esperanto • ‎español • ‎français • ‎Bahasa Indonesia • ‎italiano • ‎日本語 • ‎한국어 • ‎Nederlands • ‎português • ‎русский • ‎Tagalog • ‎Tiếng Việt • ‎中文
シンタックス強調はすべてのLTRプロジェクトでベータ版機能として利用可能です。

ウィキテキスト エディタのシンタックス強調機能プロジェクトはウィキテキストを編集する寄稿者の支援を目指しており、リンクや脚注やテンプレートなどのコードに色や背景色を指定することで、文章の部分と視覚的に識別できるようにするものです。段落に脚注を複数付けるのも楽で、あるいは複雑なテンプレートを使用する場合も括弧の数が足りないせいで正しく表示されない状態から解放されます。これにはExtension:CodeMirror を使っています。

シンタックス強調ツールの画面表示 (英語版)。
同ヒンドゥー語版。
初回の利用で現れるポップアップ画面。

シンタックス強調は従来のウィキテキスト・エディタでも New Wikitext editor (NWE) でも有効で、ツールバーに表示するボタン (Codemirror-icon.png) でオンとオフを切り替えて操作します。 非表示の個人設定で実行するため、一度オフにすると次にオンにするまで動作しません。

ウィキテキストのシンタックス強調は現在はベータ版です。ロールアウトに向けた改良について、ぜひ皆さんのご意見をお寄せください。

最初にボランティア開発者Pastakhovがビルドし、ハイテクコミュニティのNiharikaRyan が中心に作業をこなし、その完成を助けてまとめました。編集チームのEd Sanders がビジュアルエディターのウィキテキスト・モードへの統合を手伝っています。

設計思想[edit]

シンタックス強調ツールとしてExtension:CodeMirrorの採用を決めました。

CodeMirror を使う利点は次の通り。

  • 最適化により処理速度を大きく向上
  • "wysiwyg"式の効果を盛り込んでウィキテキストの要素の効果が把握しやすいー例えば実際に太字は太く、斜体は斜めに表示。
  • 節の見出しは大きめで、編集するときに位置がわかりやすい。
  • リンクは下線付きの青字、通常の displaytext は黒字と変えることで、どこがパイプでどこが文章か見分けやすい。
  • テンプレートのパラメータには色付きの太字、文字入力部分は淡色のテキストをそれぞれ使用。
  • リンクのみ明るい背景色を付け、その他の要素は処理をしない。色処理をする範囲を限定、ウィキテキスト全体を把握しやすくする。
  • 強調色の変更は編集者が文字入力を終えるまで待つ。リンクや太字・斜体の入力中、それより下の行は全て異なる色でフラッシュさせない。

CodeMirror の採用を決めるまで CacycleによるwikEd やRemember the dotによるSyntax highlighterを検討しました。

Status Updates[edit]

Sept 19, 2017[edit]

Happy to report that a couple important bugs are fixed! Ctrl-F browser search now works for both the regular edit window and the new wikitext mode, and word jumping using the option+arrow key now works on Mac browsers.

Fixing browser spellcheck is close to done; we'll be releasing that fix soon.

We still need to fix an issue with the new wikitext mode not respecting whether the beta feature is turned on or off -- you can turn it off on the Beta features page, but still see it on in the new wikitext mode. You can follow progress on this ticket: phab:T173480.

Sept 7, 2017[edit]

We're currently working on an important bug -- the Ctrl-F browser search only works if the text you're looking for is currently displayed in the edit window, or just below it. We've been investigating this for the last couple of weeks; here's an update on how it's going. You can follow progress on this ticket: phab:T174480.

We were looking at using the search add-on that GitHub uses in their version of CodeMirror, and it's not an acceptable solution for us. It only works when you've got the cursor in the edit window -- if you're not inside the edit window, ctrl-F still gives you the browser search. That's not very discoverable -- for some people, it would just be broken sometimes. The add-on also uses a combination of ctrl-F to start the search and ctrl-G to move from one highlighted word to another, which is also not very discoverable. So that is a dead end for us.

We're now investigating a couple other options, including loading the page outside the edit window in the background, after the text in the edit window is displayed. This might slow things down, so we're testing the performance.

We're still focused on solving this issue; I'm sorry it's not fixed yet.

Aug 23, 2017[edit]

Some feedback from Andy M. on Wikimedia-L to consider:

"My first impression is that it is lacking in contrast - it's far harder, now, to differentiate the various types of content. Indeed the colour pairs used (e.g. #8800CC vs. #AAAAB3) fail WCAG web accessibility guidelines for colour contrast. I realise that choice of styling colours is a "bikeshed" matter, but contrast ratio is a quantifiable and objective accessibility issue. Also, because the script does not load immediately, the larger headings cause the page to "dance" as the script kicks in."

Aug 2, 2017[edit]

Syntax Highlighting has now been released as a Beta feature on all LTR Wikimedia projects! We hope that people love using the new feature. Please leave feedback on the talk page!

We're still working on making it work for RTL languages; you can follow this progress on this ticket: T170001.

Temporarily turned off, see phabricator:T172458.

July 18, 2017[edit]

CodeMirror deployed to Simple English Wikipedia as a Beta Feature.

March 22, 2017[edit]

Team discussion, playing with CodeMirror on CommTechwiki. Performance is good, as advertised. We're generally happy with the highlighting choices. We found some bugs, and some elements that should be improved -- for example, ref tags aren't highlighted in the current version. Ryan took a lot of notes, and he'll be working on these issues -- either working with the developers, or making adjustments on our own version.

March 21, 2017[edit]

Ryan talked to Ed S on the Editing team -- they're interested in including the syntax highlighter in the new wikitext editor. This will require some investigation.

There's a current hacked version by Ed: https://gerrit.wikimedia.org/r/#/c/343878/

This version works by loading CodeMirror underneath the WikiText editor surface, making the text and background of the WikiText editor transparent, and syncing user input from the WikiText editor to the CodeMirror surface as it is entered. The problem is that it's sluggish and has syncing issues -- see phab:T161054 and phab:T161052 for more.

February 27, 2017[edit]

There's an existing extension -- Extension:CodeMirror -- that provides wikitext syntax highlighting on demand, adding a button at the top of the wikitext editor to turn highlighting on and off. (This uses a sticky preference so that an editor can turn it on once, and then see it on all future page loads.) The highlighting is acceptably fast, it takes less than a second even on a lengthy article like English WP's Barack Obama page.

There are two different use cases for syntax highlighting -- essentially, it could be a power editor feature, or a new editor training tool. Very active editors want syntax highlighting to help them edit; if this is the use case that we're focusing on, then we can make it a special preference, and let people decide if they want to use it. If we want to focus on helping new editors, then the feature would have to be on by default, and would require much stricter QA. The comments on the Wishlist proposal and votes indicate that people are requesting the power editor feature.

With that in mind -- we're planning to deploy CodeMirror as a special preference for the old wikitext editor. This will need some instruction on the preferences page to explain how to use the button & turn it on.

The VE team is planning to include this in the 2017 wikitext editor as well; we'll talk to Ed S. to see how we can work together. We'll have to make sure we agree on the color choices. In general, we'll be expected to explain the color choices, so we'll look at the existing CodeMirror colors and make sure we understand the rationale.

Another thing we have to figure out -- how will this work outside of en.wp?


重要なリンク[edit]

色とスタイルのカスタマイズ[edit]

色やスタイルの指定には、利用者のcommon.css ページ (例 User:Example/common.css) の設定値を上書きします。 CSS の編集がよくわからない利用者には下記の 初心者向けの解説をご用意しました。

CSS Class(es) Element CodeMirror styling (CSS) wikEd's styling (See InitFrameCSS) Schnark's styling Rememberthedot's styling
.cm-mw-skipformatting leading space foo bar  foo bar  foo bar
.cm-mw-list asterisk or number sign * foo bar, # foo bar * foo bar # foo bar * foo bar # foo bar * foo bar # foo bar
.cm-mw-signature,
.cm-mw-hr
signature, horizontal rule ∼∼∼∼, ---- ~~~~, ---- ~~~~, ---- ~~~~, ----
.cm-mw-indenting colons ::: foo bar ::: foo bar ::: foo bar ::: foo bar
.cm-mw-mnemonic HTML entities & & & &
.cm-mw-comment HTML comment <-- comment --> <!-- comment --> <!-- comment --> <!-- comment -->
.cm-mw-apostrophes-bold,
.cm-mw-apostrophes-italic
bold and italic '''bold''' ''italic'' '''bold''' ''italic'' '''bold''' ''italic'' '''bold''' ''italic''
Headings
pre.cm-mw-section-1 heading (size not changed in NWE) = Heading = = Heading = = Heading = = Heading =
pre.cm-mw-section-2 heading (size not changed in NWE) == Heading == == Heading == == Heading == == Heading ==
pre.cm-mw-section-3 heading === Heading === === Heading === === Heading === === Heading ===
pre.cm-mw-section-4 heading ==== Heading ==== ==== Heading ==== ==== Heading ==== ==== Heading ====
pre.cm-mw-section-5 heading ===== Heading ===== ===== Heading ===== ===== Heading ===== ===== Heading =====
pre.cm-mw-section-6 heading ====== Heading ====== ====== Heading ====== ====== Heading ====== ====== Heading ======
.cm-mw-section-header equals signs ==
Templates
example {{cite book|title=foo bar}} {{cite book|title=foo bar}} {{cite book|title=foo bar}} {{cite book|title=foo bar}}
.cm-mw-template other template content foo bar
.cm-mw-template-name template name cite book cite book
.cm-mw-template-argument-name template parameters title= title=
.cm-mw-template-delimiter pipe | |
.cm-mw-template-bracket opening/closing brackets {{ }} {{ }}
.cm-mw-template-ground
.cm-mw-template2-ground
.cm-mw-template3-ground
whole template
(number is the level of nesting)
{{foo|{{cite book|title=foo bar}}}}
Variables
example {{{foo|bar}}} {{{foo|bar}}} {{{foo bar}}} {{{foo bar}}}
.cm-mw-templatevariable variable bar
.cm-mw-templatevariable-name triple-braced variable name foo
.cm-mw-templatevariable-bracket opening/closing brackets {{{ }}}
.cm-mw-templatevariable-delimiter pipe |
Parser functions
example {{#assessment: A | High }} {{PAGENAME}}
.cm-mw-parserfunction parser function parameters High
.cm-mw-parserfunction-name parser function name PAGENAME #invoke
.cm-mw-parserfunction-bracket opening/closing brackets {{ }}
.cm-mw-parserfunction-delimiter delimiter :
Extension tags
Note: The extensions can use own styles and rules for highlighting text inside own tags. For example the Cite extension highlights text inside <ref> tags as a wikitext.
example <poem style="padding: 1em;">string
whole line
string</poem>
<ref name="foo"> </ref> <tag>...</tag> <tag>...</tag>
pre.cm-mw-exttag whole line inside tags
whole line
.cm-mw-exttag text inside tags string
.cm-mw-exttag-name tag name poem
.cm-mw-exttag-bracket opening/closing brackets < >
.cm-mw-exttag-attribute reference attributes style="padding: 1em;"
HTML tags
example <span style="foo">foo bar</span> <span style="foo">foo bar</span> <tag style="foo">foo bar</tag> <tag style="foo">foo bar</tag>
.cm-mw-htmltag-name HTML tag span
.cm-mw-htmltag-bracket opening/closing brackets < >
.cm-mw-htmltag-attribute parameters and values style="foo"

superscript
subscript

foo<sup>bar</sup>
foo<sub>bar</sub>

Foo<sup>bar</sup>
Foo<sub>bar</sub>

Pre-formatted text
pre.cm-mw-tag-pre,
.cm-mw-tag-pre
pre-formatted text <pre>foo bar</pre> <pre>foo bar</pre> <tag>foo bar</tag> <tag>foo bar</tag>
pre.cm-mw-tag-nowiki,
.cm-mw-tag-nowiki
nowiki text <nowiki>foo bar</nowiki> <nowiki>foo bar</nowiki> <tag>foo bar</tag> <tag>foo bar</tag>
Internal links
example

[[foo bar]]
[[foo#section|bar]]

[[foo bar]]
[[foo#section|bar]]

[[foo bar]]
[[foo#section|bar]]

[[foo bar]]
[[foo#section|bar]]

.cm-mw-link-pagename internal link target foo bar
.cm-mw-link # character #section
.cm-mw-link-tosection characters after the # #section
.cm-mw-link-bracket opening/closing brackets [[ ]]
.cm-mw-link-text link label (no additional formatting)
.cm-mw-link-delimiter pipe |
.cm-mw-pagename internal link targets foo bar
External links
example

https://www.example.org
[https://www.example.org]
[https://www.example.org example.org]

https://www.example.org
[https://www.example.org]
[https://www.example.org example.org]

https://example.org
[https://example.org]
[https://example.org example.org]

https://example.org
[https://example.org]
[https://example.org example.org]

.cm-mw-extlink,
.cm-mw-free-extlink
external link target www.example.org
.cm-mw-extlink-protocol,
.cm-mw-free-extlink-protocol
protocol https://
.cm-mw-extlink-text link label (no additional formatting)
.cm-mw-extlink-bracket opening/closing brackets [ ]
Tables
example

{| class="wikitable"
|-
! Header text !! Header text
|-
| Example || Example
|}

{| class="wikitable"
|-
! Header text !! Header text 
|-
| Example || Example 
|}

{| class="wikitable"
|-
! Header text !! Header text 
|-
| Example || Example 
|}

{| class="wikitable"
|-
! Header text !! Header text
|-
| Example || Example
|}

.cm-mw-table-bracket opening/closing brackets and pipe {| |}
.cm-mw-table-delimiter row and column separators | |- !
.cm-mw-table-definition table classes and styles class="wikitable"
.cm-mw-table-caption header cell text !caption
Non-CodeMirror
magic words __TOC__ __TOC__ __TOC__
semi-colon (d.term) ; foo bar
(treated as extension tag) math <math>\sum_{i=0}^\infty 2^{-i}</math> <math>\sum_{i=0}^\infty 2^{-i}</math> <tag>foo bar</tag> <tag>foo bar</tag>
(treated as extension tag) syntaxhighlight (former score) <syntaxhighlight>...</syntaxhighlight> <syntaxhighlight>...</syntaxhighlight> <tag>foo bar</tag> <tag>foo bar</tag>
(treated as internal link) category [[category:foo bar]] [[category:foo bar]] [[category:foo bar]] [[category:foo bar]]
file preview (file preview at the right-hand edge)
character disambig
(nbsp thinsp ndash mdash minus etc.)
WikEd character disambiguation.png  (screenshot) -

css 初心者向けの解説[edit]

  • この設定をしたいウィキメディアのプロジェクトごとに [[Special:MyPage/common.css]] というページを作成します (すべてのプロジェクト群で一括設定するには m:Special:MyPage/global.css を使用)。
  • 表の中からサンプルを使って解説します (*#)。いちばん下に
    .cm-mw-list {background-color: blue; color: red;}
    
    と記入、保存 (cm-mw-list は上記の表の最初から2行目の箇条書きのこと)。強調色の効果を確かめるには、箇条書きを含むページを開き、「*」「#」の表示を見てみましょう。既定の色 (color: blue; color: red;) の bluered ですが、例えば #123456 などとRGB色番号で書き換えると変更できます。
  • 同じウィキで別のページを開いて、箇条書きのマークが予想どおりの色で表示されるか確かめてください (例文のままならマーカは赤で地色が青)。
  • 次に common.css に加筆してcolours (URLリンクの色) を変更、保存してみましょう。
  • このように、上記の表の1列目にあるどのコードで CSS class を選んでも、利用者に適した色に指定できます。
  • 特別な目的のために別の色に変更する必要がある場合は、通常の/* ... */ ブロックコメントを使ってそれまで使ったcssコード一式をコメントアウトしておいて、新たにcssコード一式を書き込みます。元に戻すには、コメントアウトしたコードをブロックコードの外に出し、追加したコード一式を削除します。少し手間がかかるものの、選択肢が全くないよりも良いと言えます。
  • グローバルに色を設定した場合も、特定のウィキでは別の色を使いたいならローカルにcssを設定します。グローバルなcss設定はローカルの設定に上書きされます。