How do I create a theme for the same textarea as VS Code?

Asked

Viewed 164 times

-3

I wanted to make the textarea in html that it had different color with each character. But when I use color css everything is the same. How can I get out of this problem?

<textarea style='color: blue'>Hello World!</textarea>
javascript css html5

2 answers

2


That’s not a problem, you asked for it to happen, you applied a property to the parent element and your children are getting your father’s inheritance. At a glance Cascade and inheritance.

Like you said

I wanted to make the textarea in html that it had different color with each character.

So simple, just group each character into one span tag. And then format with css I created an example for you.

<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>

  <textarea style='color: blue'>
    <span style="color:red;">H</span>
    <span style="color:blue;">e</span>
    <span style="color:green;">l</span>
    <span style="color:pink;">l</span>
    <span style="color:orange;">o</span>
    <span style="color:orangered;">W</span>
    <span style="color:orchid;">o</span>
    <span style="color:plum;">r</span>
    <span style="color:salmon;">l</span>
    <span style="color:sienna;">d</span>
    <span style="color:yellow;">!</span>
  </textarea>

</body>
</html>

Bricadeira :). You saw that this didn’t solve what you wanted. That’s because the browser didn’t render the tags <span>. The tag <textarea> is a tag for a text box and what is written inside it will be displayed in the browser. This is what happened to the <span> tag. You can apply the color you want in <textarea>, but this will apply to all characters that contain the <textarea>. Unfortunately it is not possible to format each part of a text <textarea> and that goes for the <input> with type attribute email, text, number, tel, etc. The most you could do is to transform the <textarea> in an editor WYSIWYG read more HERE.

2

to transform your <textarea> in a code editor, you need a Text Editor, like these examples:

https://codemirror.net/

https://ace.c9.io/

Each of them has their implementation guide, a basic example below with Codemirror (my favorite):

<!-- Create a simple CodeMirror instance -->
    <link rel="stylesheet" href="lib/codemirror.css"> //caminho do css
    <script src="lib/codemirror.js"></script> // caminho do JS principal

    <!--textarea do seu html -->
    <textarea id="myTextarea"></textarea>

<!--script que vai nicializar o CodeMirror em seu textarea -->
    <script>
      var editor = CodeMirror.fromTextArea(document.getElementById('myTextarea'), {
        lineNumbers: true
      });
    </script>

Good luck

Browser other questions tagged javascript css html5

You are not signed in. Login or sign up in order to post.