ソースモード

この翻訳は不完全です。英語から この記事を翻訳 してください。

MDN のエディターにはソース編集モードへ切り替えられるような、目立ったボタンがあります。このモードでは、編集している本文の基礎となる HTML を見ることができます。 このガイドでは MDN の wiki コンテンツのソース編集モードで何ができるか、これで何をすべきか、また最も重要なこととして何をすべきでないのかを理解するのを助けます。

ソースモードを使用する前に、使用しないことを強く勧めます。私たちのスタイルガイドに合わせるために何か単純なことをしたいのではない限り、ソースモードを使用するべきではありません。以下の 警告 をご覧ください。

ソースモードにアクセスする

ソースモードに移るのは簡単です。おそらくとても簡単でしょう。エディターツールバーの左上隅にあるソースボタン (下図のとおり) をクリックします。

Partial screenshot of the editor toolbar, with the Source mode button highlighted

フォーマット整形や画像などのために、ソースは WYSIWYG コンテンツよりとても (縦方向に) 短く、ソースを編集ボックス内で見つけるのに上にスクロールしないといけないことがよくあります。

警告と抗議

上述の通り、ソースモードは滅多に使うべきではありません。ソースをいじることだけでできる特定のことは少ししかありません。最終的には編集インターフェイスがこれを扱えるように更新されるでしょう。

MDN 貢献者ガイドのどこにも記述されていないことはソースに追加してはいけません。つまり:

  • カスタムフォントやスタイルは禁止です; 標準のルックアンドフィールにない場合、そうしないでください。
  • 特別な色の禁止。MDN の標準のルックアンドフィールにある、スタイルで提供されたものだけを使ってください。

ソースモードで作業する

ソースモードでは、Wiki ページを構成する生の HTML を編集できます。エディターでの制約がなくても、あなたの行ったすべての作業が、スタイルガイドに適合していて、安全かつ確実であることを確認してください。

ソースモードでの編集時間を長くするのではなく、微修正のみを行うべきです。

残念ながら、Tab キーは、ソースモードでは動作しませn。Tab キーを使用する場所では、半角スペースを 2 つ挿入してください。

MDN で許可されない HTML 要素やぞ構成を使用する場合、ドキュメントが保存されるときに HTML から削除されます。加えて、ドキュメントの HTML は、適度に読みやすく整合性をもったまま再整形されます。

ソースモードの使用を合法化する

There are a few specific cases in which the only way to follow MDN's style guide is to resort to the use of source mode. This section covers these cases and how to properly implement these features without breaking other things.

サンプルコードの行をハイライトする

Within the sample code snippet blocks established using the PRE or Syntax Highlighter buttons in the toolbar's block group, you may wish to call special attention to specific lines of code. The only way to do this is to open source mode, find the <pre> block containing the code, and edit the <pre> tag's class attribute to include a highlight component formatted as follows:

  • highlight[lineNum1, lineNum2, ..., lineNumN]

For example, if the existing tag is <pre class="brush: js">, and you want to add highlighting to lines 4 and 7, you would change it to <pre class="brush:js; highlight:[4,7]">.

Let's look at a more complete example:

Before highlighting With highlighting
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

var path1 = new Path2D();
path1.rect(10, 10, 100, 100);

var path2 = new Path2D(path1);
path2.moveTo(220, 60);
path2.arc(170, 60, 50, 0, 2 * Math.PI);

ctx.stroke(path2);

Here, the <pre> tag is: <pre class="brush: js">

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

var path1 = new Path2D();
path1.rect(10, 10, 100, 100);

var path2 = new Path2D(path1);
path2.moveTo(220, 60);
path2.arc(170, 60, 50, 0, 2 * Math.PI);

ctx.stroke(path2);

And here, the <pre> tag has been changed to: <pre class="brush: js; highlight:[4,7]">

ツールバーボタンにないスタイル

We have some styles we use on MDN that are not available using the normal user interface. Fortunately, these aren't used very often. Some examples are:

  • To apply they "keyboard" style, you need to enclose the text of the key's name in the <kbd> element. We have no user interface for this yet. So drop into source mode and wrap the key name in <kbd>. For example, if the source is:
    <p>Press the <kbd>Enter</kbd> key to start the countdown.</p>

    The result is:

    Press the Enter key to start the countdown.

  • Some very uncommon styles used on specialized pages also need to be added by hand. This is especially common with group boxes. That's why we have macros that help to build many of the landing page components automatically.

ドキュメントのタグと貢献者

このページの貢献者: dskmori, Uemmra3
最終更新者: dskmori,