Как работает подсветка синтаксиса?
 

Всем привет!
Вопрос такой: как работают библиотеки подсветки синтаксиса?
Перепробовал уже несколько библиотек - все работает, но вот в принципе их работы никак не могу разобраться.

В целях учебы решил написать свой небольшой парсер для php кода.
Делаю так:

1) код отрисовывается в <pre class="php">...</pre>
2) нахожу этот тег и беру у него pre.textContent
3) дальше при помощи str.replace ищу например переменные и обрамляю их в <span class="phpVar">переменная</span>
4) в итоге получаю строку в которой все переменные помещены в спаны

И вот тут у меня затык. По идее, я этой строкой должен заменить содержимое pre с кодом. Но как это сделать?
Если очистить тег pre и добавить строку через createTextNode, то все теги span видны как есть. Поэтому приходится очищать исходный тег и делать в него innerHTML.

Другого варианта не вижу. Только если парсить получившуюся строку и добавлять ее как положено в дерево.

В php есть встроенная подсветка кода можете использовать ее
Прикрепил файл

Poznakomlus,
Я знаю, про эту функцию. Вопрос в реализации на JS - как правильно заменить исходный код подсвеченным.

регулярные выражения и строковые функции никто не отменял
совет не занимайтесь велосипедом
возьмите уже готовые и оттестированные решения highlight code js in Google

Poznakomlus,
Ну написал же...

Как вставлять спаны со стилями я понял. Но как результирующую строку вставить в исходный тег не понял

Hapson,
вариант ... jQuery highlight plugin — поиск и подсветка слов в тексте

Хорошо, задам вопрос иначе...
Есть строка

"&lt;?php <span style="color:#00F">$var</span> = <span style="color:#F00">&quot;string&quot;</span>; <span style="color:#00F">$str</span> = <span style="color:#F00">&quot;&lt;str&gt;&quot;</span>; ?&gt; "

Как ее вставить в <pre>сюда</pre>, чтобы теги span выполняли свою задачу, а не вставлялись как есть

<style>
    pre {
      white-space:normal;
    }
  </style>
    <pre>"&lt;?php
      <span style="color:#00F">$var</span>=
      <span style="color:#F00">&quot;string&quot;</span>;
      <span style="color:#00F">$str</span>=
      <span style="color:#F00">&quot;&lt;str&gt;&quot;</span>; ?&gt; "</pre>

вы про white-space?

Poznakomlus,
Вот к примеру, я нашел тег pre, из которого взял вот такую строку

"<?php\n$var = "string";\n?>\n"

Я преобразовал ее в:

"&lt;?php <span style="color:#00F">$var</span> = <span style="color:#F00">&quot;string&quot;</span>; ?&gt; "

Теперь мне нужно очистить тег pre - это не проблема.
Дальше нужно эту строку вставить в тег pre, но чтобы теги span раскрашивали текст, а не вылезали как есть