アトムエディタでハイライトされない部分の理由とハイライトする方法がしりたいです。

前提・実現したいこと

ドットインストール、はじめてのJavaScriptにて学習中です。
動画を追ってアトムエディタにコードを打っているのですが、動画ではハイライトされている部分が自分ではハイライトされません。ですが、ブラウザでは動画と同じように動作します。
やはりハイライトされた方がみやすいので、ハイライトされない理由とハイライトする理由を知りたいです。

初学者ではじめての質問のため見当違いや的外れ、要領を得ない点があるかと思われますが、ご教授いただけると幸いです。

発生している問題・エラーメッセージ

下記ソースコードの
  .box {
      width: 100px;
      height: 100px;
      background: skyblue;
      cursor: pointer;

の部分と、

  document.getElementById('target').addEventListener('click', function() {
      document.getElementById('target').style.background = 'pink';
の部分だけ、ハイライトされません。そのほかの部分はハイライトされます。
今回の質問に際しコピーして貼り付けたのですが、ここではハイライトされているようです・・・
なぜでしょうか・・・

該当のソースコード

<!DOCTYPE html>
<html lang ="ja">
<head>
  <meta charset ="utf-8">
  <title>JavaScript Practice</title>
  <style>
    .box {
      width: 100px;
      height: 100px;
      background: skyblue;
      cursor: pointer;
    }
  </style>
</head>

<body>
  <div id="target" class="box"></div>

  <script>
    'use strict';

    document.getElementById('target').addEventListener('click', function() {
      document.getElementById('target').style.background = 'pink';
    });
  </script>
</body>
</html>

試したこと

タイプミスの確認
ブラウザ動作の確認
他サイトで調べた方法①ファイル名の拡張子がついていることを確認、②アトムエディタのテーマを変更（現在、One Darkです）
上記は実施しました。

補足情報（FW/ツールのバージョンなど）

先月下旬にアトムエディタをインストールしたばかりで最新のバージョンかと思われます。
ATOM　1.38.2

行動規範の内容に同意します

回答1件

ベストアンサー

私のAtomエディタで確認したところ問題なく表示されました。
VS Code (Visual Studio Code)というAtomよりも使いやすいエディタがあるため
特にAtomを使用する理由がなければVS Codeの使用をオススメします。
https://code.visualstudio.com/

投稿2019/06/19 14:24

編集2019/06/19 14:27

yasutomi

総合スコア2937

msmr

2019/06/19 14:36 編集

ご回答いただきありがとうございました。パソコンのスペックによって表示が変わる場合があるのですね。勉強になりました。今使っているパソコンは先月下旬に購入したばかりのMacBook Proなのでおそらくスペックは問題ないと思われます・・・。 VS Code (Visual Studio Code)というものもあるのですね。試してみたいと思います！もしその他の可能性があればご教授いただけるとありがたいです。