Atom - HTML code turns gray when copying and pasting (updated with code)

问题

I have this weird issue where when I copy and paste into my index.html file in atom, it makes the html code turn gray. This issue only happens when I copy and paste. It doesn't appear to be related to anything in terms of code since this happens regardless of what project I'm working on. If I don't copy and paste into Atom, this issue doesn't happen. It ONLY happens when I copy and paste. I end up running to the issue always since I need to copy and paste the links to libraries for bootstrap, jquery etc. If I can't figure it out, it's such a nuisance that I'm going to switch IDE's for web development. I've even tried uninstalling and reinstalling Atom which didn't help. Even though it's not related to code, here's an HTML file that I just worked on where it's happening.

Any help is much appreciated. Thank you!

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Flask App</title>
  <link rel="stylesheet" href="../static/styles/style.css" />
  <!-- jQuery UI Styles -->
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />

  <meta name="viewport" content="width=device-width, initial-scale=1" />

  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous" />

  <!-- Bootstrap bundle JS - includes boostrap's own JS plugins and Popper for tooltips and popovers -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW"
    crossorigin="anonymous"></script>
</head>

<body style="background-color: #202020; color: #fff">
  <h1 id="mainHeader">Should I buy, sell, or hold this stock?</h1>
  <div id="mainContainer" class="container">
    <form method="post" id="form">
      <!-- Enter stock symbol  -->
      <input id="stockInput" type="text" name="number" placeholder="Enter stock symbol or name..." size="30" />
      <!-- Radio buttons -->
      <div id="radioButtonContainerId">
        <p>
          <label for="isLiveFor" class="radio-inline">
            <input type="radio" name="radio" id="isLive" disabled="true" />
            Live tweets</label>
          <label for="isPastFor">
            <input type="radio" name="radio" id="isPastTweet" />
            Past tweets</label>
        </p>
      </div>

      <!-- Number of tweets  -->
      <p>
        <input id="numTweetsInput" type="number" name="numTweets" placeholder="Number of tweets" min="1"
          max="100000000000000" style="display: none" />
      </p>
      <!-- Date Range  -->
      <p>
        <input id="numDaysInput" type="number" name="numDays" placeholder="Past days" min="1" max="100000000000000"
          style="display: none" />
      </p>

      <!-- Submit Button  -->
      <p>
        <button class="btn btn-success">Submit</button>
      </p>
    </form>
  </div>

  <div class="container" id="percentResults">
    <p id="percentage"></p>
    <p id="square"></p>
  </div>

  <!-- 1. jQuery -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

  <script src="../static/custom.js"></script>
</body>

</html>

回答1:

Atom might not be recognizing the syntax of your code immediately as soon as you paste some new code and its colour seems grey. Check the bottom right corner of the screen to make sure the atom has the correct language/file extension selected. You can manually select this if atom doesn't it automatically recognises the code language. Try setting from Html to Html(Go) manually or whichever syntax it recognises.

Also, the code turns grey if the file is not saved in the particular file extension.

来源：https://stackoverflow.com/questions/65765380/atom-html-code-turns-gray-when-copying-and-pasting-updated-with-code

标签

html

atom-editor

color-scheme