install codemirror for textareas [added]

i think rather than editing all the code using just a plain textarea element it might be nice to have codemirror format them nicer

https://stackoverflow.com/questions/21085170/codemirror-how-to-install 

https://codemirror.net/ 

So many options!

https://cdnjs.com/libraries/codemirror

edit-form.html

Codemirror Theme Options: https://codemirror.net/demo/theme.html#monokai 

I think i like monokai the best for a dark theme. 

this allows for codemirror in modes for html, css, php and javascript so can cover all modes in each textarea. 

HTML

<h2 class="mt10">HTML Codemirror</h2>
<textarea id="text-area-html"></textarea>

<h2 class="mt10">Scripts Codemirror</h2>
<p>for include scripts like css or js, etc. </p>
<textarea id="text-area-scripts"></textarea>

<h2 class="mt10">CSS Codemirror</h2>
<textarea id="text-area-css"></textarea>

Scripts

<!-- CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.59.2/codemirror.min.css" integrity="sha512-MWdvo/Qqcf4pY1ecQUB1uBn0qLp19U/qJ1Rpp2BDZeuBA7YsFEwkvqR/+aG4BroPiAYDunKJ6X8R/Pmdt3p7oA==" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.59.2/theme/monokai.min.css" integrity="sha512-R6PH4vSzF2Yxjdvb2p2FA06yWul+U0PDDav4b/od/oXf9Iw37zl10plvwOXelrjV2Ai7Eo3vyHeyFUjhXdBCVQ==" crossorigin="anonymous" />

<!-- javascript  -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.59.2/codemirror.min.js" integrity="sha512-UZAFKlbB343VyEfCComsVIxp836iYUvHyAuRYFoVN4LTNB6mpM+8EgKW8ymIV2qLZQsIiNdbpmJuA8y6IKzOow==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.59.2/mode/xml/xml.min.js" integrity="sha512-XPih7uxiYsO+igRn/NA2A56REKF3igCp5t0W1yYhddwHsk70rN1bbbMzYkxrvjQ6uk+W3m+qExHIJlFzE6m5eg==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.59.2/mode/htmlmixed/htmlmixed.min.js" integrity="sha512-IC+qg9ITjo2CLFOTQcO6fBbvisTeJmiT5D5FnXsCptqY8t7/UxWhOorn2X+GHkoD1FNkyfnMJujt5PcB7qutyA==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.59.2/mode/css/css.min.js" integrity="sha512-rsFXL+3jYau54xgkx2FtVPo+yRM4vLMEU9VBWl8hZX+t8MEYzGBHeHh5ELv04uthHqix7Dhw2o4KgQ1c+s6dEQ==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.59.2/mode/javascript/javascript.min.js" integrity="sha512-+tn2IYnLwD2J9p6Nrn/Dl7ag9lluHA0GAblT/vnMiJV8DU/iDsldgf+9XbEqZUee2ThyDtfmSDb+IDZ9u7jrSA==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.59.2/mode/php/php.min.js" integrity="sha512-i+JuurEwS1TBFIkaoI0KNhkdiR2yu5nAVdFJ/3Sm3BVbMIkq/1Nv/JsFGUZsqB4VKV6vj1wP5yi1aqyxenx2kw==" crossorigin="anonymous"></script>

Javascript

/* Here is the updated version of the load script */
window.onload = function() {
  window.editor = CodeMirror.fromTextArea(document.getElementById("text-area-html"), {
    mode: 'htmlmixed',
    lineWrapping: true,
    lineNumbers: true,
    theme: 'monokai',
    styleActiveLine: true,
    matchBrackets: true
  });
  window.editor = CodeMirror.fromTextArea(document.getElementById("text-area-scripts"), {
    mode: 'htmlmixed',
    lineWrapping: false,
    lineNumbers: true,
    theme: 'monokai',
    styleActiveLine: true,
    matchBrackets: true
  });
  window.editor = CodeMirror.fromTextArea(document.getElementById("text-area-css"), {
    mode: 'css',
    lineWrapping: true,
    lineNumbers: true,
    theme: 'monokai',
    styleActiveLine: true,
    matchBrackets: true
  });
  window.editor = CodeMirror.fromTextArea(document.getElementById("text-area-javascript"), {
    mode: 'javascript',
    lineWrapping: true,
    lineNumbers: true,
    theme: 'monokai',
    styleActiveLine: true,
    matchBrackets: true
  });
  window.editor = CodeMirror.fromTextArea(document.getElementById("text-area-php"), {
    mode: 'php',
    lineWrapping: true,
    lineNumbers: true,
    theme: 'monokai',
    styleActiveLine: true,
    matchBrackets: true
  });
};

HTML Codemirror

Scripts Codemirror

for include scripts like css or js, etc.

CSS Codemirror

No Items Found.

Add Comment
Type in a Nick Name here
 
Page Views

This page has been viewed 752 times.

Search Code
Search Code by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code snippits here, mostly for my reference. Also if i find a good site, i usually add it here.

❤👩‍💻🕹

Random Quote
Ever tried. Ever failed. No matter. Try again. Fail again. Fail better. You won't believe what you can accomplish by attempting the impossible with the courage to repeatedly fail better.
Unknown