HTML - code ako plain text

Dobrý den,

rád bych sa spýtal ako pomocou html, css, a js spraviť to aby sa kód ktorý napíšem do editoru, aby sa nebral ako kód, ale priamo ten kód bol napsaný aj v prehliadači na danej stránke, tak aby sa to podle farebne oddelovalo automaticky podle farieb v editoru, tzv text, tagy, hodnoty a pod.
Vím jak ručne prideliť pri každom tzv. že napíšu kód a ručne oddelím pomocou

<span style="color:blue">
   <
</span>
<span style="color:brown">
   html
</span>
<span style="color:blue">
   >
</span>

Avšak chci aby priamo stránka dokázala rozoznať kód či sa jedná o html, css, js, a sama pre určité prvky použila určité farby, nezávisle na tom čo tam napíšu aby som nemusel pre každý prvok zvlášť definovať. Tzv, by sa kód v editore presne rovnako zobrazil aj priamo na cielovej stránke a jak by sa do určitej časti menil samotný kód, automaticky by ho zobrazilo po otvorení index.html v prehliadači kód rovnako ako v editoru. A kód sa použil len ako plaint text, tzv by ho nebralo ako kód, ako kdyby to neboly tagy.

Editor používam Visual Studio Code

taky jsem skoušel aby nebralo ako kód používať namiesto <> prvok &lt;h1&gt; &lt;/h1&gt;