ソースモード

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

ソースモードを使用することを考える前に、使用しないことを私たちが強く主張していることにご注意ください。やっていることがスタイルガイドに合わせるための単純なことでない限り (残念ながらまだソースモードでないと作成できないものが必要とされています)、ソースモードを使用する必要はないはずです。下記の警告をご覧ください。

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

ソースモードに移るのは簡単です。エディターツールバーの左上隅にあるソースボタンをクリックしてください。

ソースモードボタンが強調表示されたエディタツールバーの部分的なスクリーンショット

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

警告と抗議

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

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

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

ソースモードで作業する

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

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

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

MDN が許可しない HTML 要素や属性を使用すると、ドキュメントが保存されるときに HTML から削除されます。加えて、ドキュメントの HTML は、適度に読みやすく一貫性を保つために再整形されます。

ソースモードを正しく使用する

MDN のスタイルガイドに従う唯一の方法は、いくつかの具体的な例でソースモードの使用を頼ることです。 このセクションでは、これらのケースと、他のものを壊すことなくこれらの機能を適切に実装する方法について説明します。

サンプルコードの行を強調表示する

ツールバーのブロックグループの PRE または 構文ハイライター ボタンを使用して設定されたサンプルコードスニペットのブロック内で、特定のコード行に特別な注意を向けることができます。これを行う唯一の方法は、ソースモードを開いてコードを含む <pre> ブロックを探し、<pre> タグの class 属性を編集して、次のような highlight コンポーネントを組み込むことです。

  • highlight[lineNum1, lineNum2, ..., lineNumN]
  • highlight[lineNumStart-lineNumEnd, ..., lineNumN]
"hightlight[" <line-number-list> "]"

Where:
<line-number-list> = [ <line-number> | <line-range> ]#
<line-range> = <line-number> - <line-number>
<line-number> = <number-token>

たとえば、既存のタグが <pre class="brush: js"> で、4行目と7行目にハイライトを追加する場合は、それを <pre class="brush:js; highlight:[4,7]"> に変更します。

より完全な例を見てみましょう。

ハイライト前 ハイライト後 
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);

ここで、 <pre> タグは <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);

ここで <pre> タグは <pre class="brush: js; highlight:[4,7]">に変更されました。

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

私たちは MDN で使用するいくつかのスタイルを持っていますが、通常のユーザーインターフェイスでは使用できません。 幸いにも、これらはあまり頻繁には使用されません。 いくつかの例があります。

  • キー名のテキストに "キーボード" スタイルを適用するには、それらを <kbd> 要素で囲む必要があります。これにはまだユーザーインターフェイスはありません。 ソースモードにして <kbd> でキー名を囲みます。たとえば、ソースが次の場合 
    <p>Press the <kbd>Enter</kbd> key to start the countdown.</p>

    結果は次のとおりです。

    Press the Enter key to start the countdown.

  • 特殊なページで使用される非常に珍しいスタイルも手作業で追加する必要があります。 これは特にグループボックスで一般的です。 そのため、ランディングページコンポーネントの多くを自動的に構築するためのマクロが用意されています。