1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
|
---
title: ソースモード
slug: MDN/Editor/Source_mode
tags:
- Guide
- Intermediate
- MDN Meta
- editor
- ガイド
translation_of: MDN/Editor/Source_mode
---
<div>{{MDNSidebar}}</div>
<p class="summary">MDN のエディターには、ソース編集モードへ切り替えられる目立つボタンがあります。このモードでは、編集している本文の基礎となる HTML を見ることができます。<span class="seoSummary">このガイドでは MDN の wiki コンテンツのソース編集モードで<strong>何ができるか</strong>、これで何を<strong>すべき</strong>か、また最も重要なこととして何を<strong>すべきでない</strong>のかを理解するのに役立ちます。 </span></p>
<div class="blockIndicator warning">
<p>ソースモードを使用することを考える前に、使用しないことを私たちが<em>強く</em>主張していることにご注意ください。やっていることがスタイルガイドに合わせるための単純なことでない限り (残念ながらまだソースモードでないと作成できないものが必要とされています)、ソースモードを使用する必要はないはずです。下記の{{anch("Warnings and caveats", "警告")}}をご覧ください。</p>
</div>
<h2 id="Accessing_source_mode" name="Accessing_source_mode">ソースモードにアクセスする</h2>
<p>ソースモードに移るのは簡単です。エディターツールバーの左上隅にある<strong>ソース</strong>ボタンをクリックしてください。</p>
<p><img alt="ソースモードボタンが強調表示されたエディタツールバーの部分的なスクリーンショット" src="https://mdn.mozillademos.org/files/15295/Source%20mode%20button.png" style="height: 98px; width: 267px;"></p>
<p>整形や画像などによって、ソースは WYSIWYG コンテンツより (縦方向に) 短く、ソースを<a href="/ja/docs/MDN/Contribute/Editor/Edit_box">編集ボックス</a>内で見つけるのに上にスクロールしないといけないことがよくあります。</p>
<h2 id="Warnings_and_caveats" name="Warnings_and_caveats">警告と抗議</h2>
<p>上述の通り、ソースモードを使う必要があることは滅多にありません。ソースをいじらないとできないことは少ししかありません。最終的には編集インターフェイスがこれを扱えるように更新されるでしょう。</p>
<p><a href="/ja/docs/MDN/Contribute">MDN 貢献者ガイド</a>のどこにも記述されていないことはソースに追加しては<strong>いけません</strong>。つまり、</p>
<ul>
<li>カスタムフォントやスタイルは禁止です。標準のルックアンドフィールにない場合、使わないでください。</li>
<li>特別な色の禁止。MDN の標準のルックアンドフィールにある、スタイルで提供されたものだけを使ってください</li>
</ul>
<h2 id="Working_in_source_mode" name="Working_in_source_mode">ソースモードで作業する</h2>
<p>ソースモードでは、 Wiki ページを構成する生の HTML を編集できます。エディターでの制約を受けなくなりますが、行ったすべての作業が<a href="/ja/docs/MDN/Contribute/Content/CSS_style_guide">スタイルガイド</a>に適合していて、安全かつ確実であることを確認してください。</p>
<div class="blockIndicator note">
<p>ソースモードでの編集時間を長くするのではなく、微修正のみを行うべきです。</p>
</div>
<p>残念ながら、<kbd>Tab</kbd> キーは、ソースモードでは動作しません。 <kbd>Tab</kbd> キーを使用する場所では、半角スペースを 2 つ挿入してください。</p>
<p>MDN が許可しない HTML 要素や属性を使用すると、ドキュメントが保存されるときに HTML から削除されます。加えて、ドキュメントの HTML は、適度に読みやすく一貫性を保つために再整形されます。</p>
<h2 id="Legitimate_uses_for_source_mode" name="Legitimate_uses_for_source_mode">ソースモードを正しく使用する</h2>
<p>MDN のスタイルガイドに従う唯一の方法は、いくつかの具体的な例でソースモードの使用を頼ることです。 このセクションでは、これらのケースと、他のものを壊すことなくこれらの機能を適切に実装する方法について説明します。</p>
<h3 id="Highlighting_lines_in_sample_code" name="Highlighting_lines_in_sample_code">サンプルコードの行を強調表示する</h3>
<p><a href="/ja/docs/MDN/Contribute/Editor/Basics/Toolbar#Blocks">ツールバーのブロックグループ</a>の <strong>PRE</strong> または <strong>構文ハイライター</strong> ボタンを使用して設定されたサンプルコードスニペットのブロック内で、特定のコード行に特別な注意を向けることができます。これを行う唯一の方法は、ソースモードを開いてコードを含む {{HTMLElement("pre")}} ブロックを探し、<code><pre></code> タグの {{HTMLAttrxRef("class")}} 属性を編集して、次のような <code>highlight</code> コンポーネントを組み込むことです。</p>
<ul>
<li><code>highlight[<em>lineNum1</em>, <em>lineNum2</em>, ..., <em>lineNumN</em>]</code></li>
<li><code>highlight[<em>lineNumStart</em>-<em>lineNumEnd</em>, ..., <em>lineNumN</em>]</code></li>
</ul>
<pre class="syntaxbox notranslate">"hightlight[" <a href="#highlight-line-number-list"><line-number-list></a> "]"
<strong>Where:</strong>
<a id="highlight-line-number-list" name="highlight-line-number-list"><line-number-list></a> = <a href="/ja/docs/Web/CSS/Value_definition_syntax#Brackets">[</a> <a href="#highlight-line-number"><line-number></a> <a href="/ja/docs/Web/CSS/Value_definition_syntax#Single_bar">|</a> <a href="#highlight-line-range"><line-range></a> <a href="/ja/docs/Web/CSS/Value_definition_syntax#Brackets">]</a><a href="/ja/docs/Web/CSS/Value_definition_syntax#Hash_mark">#</a>
<a id="highlight-line-range" name="highlight-line-range"><line-range></a> = <a href="#highlight-line-number"><line-number></a> - <a href="#highlight-line-number"><line-number></a>
<a id="highlight-line-number" name="highlight-line-number"><line-number></a> = <number-token></pre>
<p>たとえば、既存のタグが <code><pre class="brush: js"></code> で、4行目と7行目にハイライトを追加する場合は、それを <code><pre class="brush:js; highlight:[4,7]"></code> に変更します。</p>
<p>より完全な例を見てみましょう。</p>
<div style="overflow: auto;">
<table class="fullwidth-table">
<thead>
<tr>
<th scope="col">ハイライト前</th>
<th scope="col">ハイライト後</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<pre class="brush: js; notranslate">
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>
<p>ここで、 {{HTMLElement("pre")}} タグは <code><pre class="brush: js;"></code></p>
</td>
<td>
<pre class="brush: js; highlight[4, 7] notranslate">
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>
<p>ここで <code><pre></code> タグは <code><pre class="brush: js; highlight:[4,7]"></code>に変更されました。</p>
</td>
</tr>
</tbody>
</table>
</div>
<h3 id="Styles_that_dont_have_toolbar_buttons" name="Styles_that_dont_have_toolbar_buttons">ツールバーボタンにないスタイル</h3>
<p>私たちは MDN で使用するいくつかのスタイルを持っていますが、通常のユーザーインターフェイスでは使用できません。 幸いにも、これらはあまり頻繁には使用されません。 いくつかの例があります。</p>
<ul>
<li>キー名のテキストに "キーボード" スタイルを適用するには、それらを {{HTMLElement("kbd")}} 要素で囲む必要があります。これにはまだユーザーインターフェイスはありません。 ソースモードにして <code><kbd></code> でキー名を囲みます。たとえば、ソースが次の場合
<pre class="brush: html; no-line-numbers notranslate"><p>Press the <kbd>Enter</kbd> key to start the countdown.</p></pre>
<p>結果は次のとおりです。</p>
<p>Press the <kbd>Enter</kbd> key to start the countdown.</p>
</li>
<li>特殊なページで使用される非常に珍しいスタイルも手作業で追加する必要があります。 これは特にグループボックスで一般的です。 そのため、ランディングページコンポーネントの多くを自動的に構築するためのマクロが用意されています。</li>
</ul>
|
