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]

たとえば、既存のタグが<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.

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

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

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