We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

ソースモード

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

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

Before you consider using source mode, please note that we strongly urge you not to. Unless what you're doing is something you simply have to do in order to meet our style guide (we do have required features that unfortunately can't be created without using source mode yet), you shouldn't need to use source mode. See Warnings and caveats below.

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

ソースモードに移るのは簡単です、たぶん簡単すぎます。エディターツールバーの左上隅にあるソースボタン(下記に表示)をクリックします。

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

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

警告と抗議

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

MDN contributor guide の中のどこかで記述されていないことはソースに追加してはいけません。つまり:

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

ソースモードで作業する

Once you're in source mode, you're editing the raw HTML that makes up the content of a wiki page. While you're unconstrained by the editor, you need to do everything you can to make sure your work matches the style guide and that it works safely and reliably.

You should usually only work in source mode for brief tweaks rather than for an extended period of writing time.

Unfortunately, the Tab key doesn't work in our source editor at this time. Please insert two spaces for each place where you would normally use the Tab key.

If you use any HTML elements or attributes that MDN doesn't allow, they will be removed from the HTML when your document is saved. In addition, the document's HTML will be reformatted to keep it moderately readable and consistent.

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

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.

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

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