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

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

В целях учебы решил написать свой небольшой парсер для 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 раскрашивали текст, а не вылезали как есть

вот это не понятно span задает в примерах цвет.
вылезали как есть ? куда вылезали
как вы вставляете свой код

Poznakomlus,
Если итоговую строку вставить через innerHTML, то все нормально.
Есть ли еще метод, кроме innerHTML

рони,
Да, вот это, то что нужно!
Спасибо :)