MDN におけるコードの色分けについて

Question

url:
https://developer.mozilla.org/ja/docs/Web/API/WindowTimers/clearTimeout

MDN に載っていました使い方の例ですが，文字の色分けについて
青（var,function等）；予約語
赤（remind,alert等）；メソッド
黒（aMessage,timeoutID等）；識別子
緑（number,Wake up!等）；文字列
紫（1000）；数値

の認識で間違いないでしょうか？

Comments

[m.ts10806]

MDNの当該記事URLを提示してください。
画像で提示されても探せません。

Answer 1

MDN におけるコードの色分けについて

現在の MDNは、色と語は統一されていません。

• 例）MDN undefined のページ

ベージ冒頭のコード例と、説明セクションのコード例とでは、 undefined の文字の色が異なっています。

あくまでも「文法を見やすくするために色分けしているだけ」と思ってください。

---

統一されていない理由：

コードを公開する際、色分けしてると読みやすいよね。ということで、シンタックスハイライトの先駆けとして、SyntaxHilighter.js がjavascript ライブラリとして登場しました（2004年）。
これ以降、似たようなライブラリが多数登場していますが、どのライブラリもサイトのイメージに合わせて、細かく色を変えることができます。

MDN もこのようなライブラリを活用して独自の着色でコードサンプルを表現していましたが、最近はプレイグラウンド系のサービスを起用して iframe 表示する箇所があります。
このため、色分けの統一よりも「文法を見やすく（コードリーディングしやすく）」という目的を満たせば良いという方針になっていると思います。

認識で間違いないでしょうか？

意思疎通できればよいので、言葉は、多少間違ってもいいのです。
それよりも、コードを書きなぐってエラーのないプログラムを書けるようになる事の方が大事です。

Comments

[退会済みユーザー]

コードを書きなぐるように致します！

Answer 2

色付けはPrismを使っていると思われます。
Prism.js シンタックスハイライターが素晴らしい | Thought is free

んでエディターとかで色は変わる可能性も考えると、色で覚えるのは混乱のもとですので(予約語って異なる役割のものがいっぱい有りますし)
JavaScript リファレンス - JavaScript | MDNを見たほうが良いです。

Comments

[oikashinoa]

改めて見ると知らないものが有って面白い。
[Atomics - JavaScript | MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Atomics)は使ってみたいな

[退会済みユーザー]

わかりました！ありがとうございます。

[oikashinoa]

これから色んなサイトを見てアイディアを得たり調べることになりますが、MDN(≠MdN)は確実に見て下さい。
https://developer.mozilla.org/ja/

[退会済みユーザー]

確実にみるように致します！

Answer 3

どの機能がどの色か・・・というより、コードハイライトプラグインの仕様かと思います。

例えばこういうの
行番号や各行背景色で見やすい ソースコード ビュー ライブラリ　SyntaxHighlighter

例で言うとsetupとかremindかそれ自体はメソッドではないと思いますし、
提示先の記事のwindow.onclickのonclickはプロパティです。

色で意味を考えるより「見やすく色分けされてるな」くらいの認識の方が良いかと思います。

つまり、teratailのマークダウンのcode機能と同じ。
提示先の記事のコードをteratailのマークダウン使うとこうなります。

var alarm = {
  remind: function(aMessage) {
    alert(aMessage);
    this.timeoutID = undefined;
  },

  setup: function() {
    if (typeof this.timeoutID === 'number') {
      this.cancel();
    }

    this.timeoutID = window.setTimeout(function(msg) {
      this.remind(msg);
    }.bind(this), 1000, 'Wake up!');
  },

  cancel: function() {
    window.clearTimeout(this.timeoutID);
    this.timeoutID = undefined;
  }
};
window.onclick = function() { alarm.setup(); };