Why no simple bare bones instructions how to change ID to CLASS?

Meta
1

I have scoured through the website guide, the huge manual and the github pages. I’ve been through every problem listed on the github page and still cannot find any information out on how, why there’s no simple easy instructions to just display HTML markup, or other code languages using

CLASSES instead of ID’s <------

and why we cannot use pre, code tags instead of textarea?
Please if anyone knows, or can explain how we can use code, pre instead of textarea?

After several hours trying everything to show the markup using classes instead of ID’s
I found this on stackoverflow.

I’m going to post it here because it works perfectly. Just I don’t see how anyone would of known how to get the same sample script working without the help of this guy over at stackoverflow, as no information, or instructions exist at all about this on codemirror website, or git.

I really hope the owner of the website/project actually listens and puts some simple instructions up.
Would only take him a few moments to add a quick example on the homepage how to swap to classes.

If you want to get this script working using ID’s but with the document.getElementById() use the following.

using it with ID

<form><textarea id="myTextarea">
    ... your code for highlighting goes here ...
    </textarea></form>

<script>
  var editor = CodeMirror.fromTextArea(document.getElementById("myTextarea"), {
    lineNumbers: true
  });
</script>

If you want to use classes instead of ID’s as ID’s can only be used 1 time per page.
Where as classes can be used over and over again. (This script should of been class based NOT ID)

Why do I say that? Well just imagine having 20 examples to show off some markup code on your site.
using ID’s would require 20 different ID names. & 20 more of these code snippets per ID used.

<script>
      var editor = CodeMirror.fromTextArea(document.getElementById("myTextarea"), {
        lineNumbers: true
      });
    </script>

That’s a lot of code when it could just be cut down to 1 script snippet in your page, and use classes instead.
This way you can just keep repeating the class name if you wish.

the same script but using CLASS instead of ID

<script>
    var areas = document.getElementsByClassName("myTextarea");
    for(var i = 0; i < areas.length; i++) {   
      CodeMirror.fromTextArea(areas.item(i), {lineNumbers: true});
    }
</script>

Now you’ve cut down on constantly changing the ID name and having to constantly write a new <script> tag per <textarea> in your pages.

For anyone else spending hours of searching to get something as simple as “CLASSES” working then I hope this helps you from searching the interwebs up and down looking for an answer.

2

You didn’t find out about this in the CodeMirror docs because this has nothing to do with CodeMirror, since getElementById and getElementByClassName are browser features, and you can read about them on MDN and such.

3

Would it be asking to much to include some simple instructions on your homepage how to make this work with classes the correct way?

And MDN, or any other resources wouldn’t explain what this part does.
for(var i = 0; i < areas.length; i++) {
CodeMirror.fromTextArea(areas.item(i),