Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 08.01.2014, 17:05
Аватар для Hapson
Кандидат Javascript-наук
Отправить личное сообщение для Hapson Посмотреть профиль Найти все сообщения от Hapson
 
Регистрация: 23.07.2013
Сообщений: 122

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

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

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

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

Другого варианта не вижу. Только если парсить получившуюся строку и добавлять ее как положено в дерево.
Ответить с цитированием
  #2 (permalink)  
Старый 08.01.2014, 17:16
Аватар для Vlasenko Fedor
Профессор
Отправить личное сообщение для Vlasenko Fedor Посмотреть профиль Найти все сообщения от Vlasenko Fedor
 
Регистрация: 13.03.2013
Сообщений: 1,572

В php есть встроенная подсветка кода можете использовать ее
Прикрепил файл
Вложения:
Тип файла: txt highlight_code.txt (1.2 Кб, 12 просмотров)

Последний раз редактировалось Vlasenko Fedor, 08.01.2014 в 17:18.
Ответить с цитированием
  #3 (permalink)  
Старый 08.01.2014, 17:31
Аватар для Hapson
Кандидат Javascript-наук
Отправить личное сообщение для Hapson Посмотреть профиль Найти все сообщения от Hapson
 
Регистрация: 23.07.2013
Сообщений: 122

Poznakomlus,
Я знаю, про эту функцию. Вопрос в реализации на JS - как правильно заменить исходный код подсвеченным.
Ответить с цитированием
  #4 (permalink)  
Старый 08.01.2014, 17:46
Аватар для Vlasenko Fedor
Профессор
Отправить личное сообщение для Vlasenko Fedor Посмотреть профиль Найти все сообщения от Vlasenko Fedor
 
Регистрация: 13.03.2013
Сообщений: 1,572

регулярные выражения и строковые функции никто не отменял
совет не занимайтесь велосипедом
возьмите уже готовые и оттестированные решения highlight code js in Google
Ответить с цитированием
  #5 (permalink)  
Старый 08.01.2014, 17:49
Аватар для Hapson
Кандидат Javascript-наук
Отправить личное сообщение для Hapson Посмотреть профиль Найти все сообщения от Hapson
 
Регистрация: 23.07.2013
Сообщений: 122

Poznakomlus,
Ну написал же...
Цитата:
Перепробовал уже несколько библиотек - все работает, но вот в принципе их работы никак не могу разобраться.
Цитата:
В целях учебы решил написать свой небольшой парсер для php кода.
Ответить с цитированием
  #6 (permalink)  
Старый 08.01.2014, 17:50
Аватар для Hapson
Кандидат Javascript-наук
Отправить личное сообщение для Hapson Посмотреть профиль Найти все сообщения от Hapson
 
Регистрация: 23.07.2013
Сообщений: 122

Сообщение от Poznakomlus
регулярные выражения и строковые функции никто не отменял
Как вставлять спаны со стилями я понял. Но как результирующую строку вставить в исходный тег не понял
Ответить с цитированием
  #7 (permalink)  
Старый 08.01.2014, 17:51
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,068

Hapson,
вариант ... jQuery highlight plugin — поиск и подсветка слов в тексте
Ответить с цитированием
  #8 (permalink)  
Старый 08.01.2014, 17:59
Аватар для Hapson
Кандидат Javascript-наук
Отправить личное сообщение для Hapson Посмотреть профиль Найти все сообщения от Hapson
 
Регистрация: 23.07.2013
Сообщений: 122

Хорошо, задам вопрос иначе...
Есть строка
"&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 выполняли свою задачу, а не вставлялись как есть
Ответить с цитированием
  #9 (permalink)  
Старый 08.01.2014, 18:20
Аватар для Vlasenko Fedor
Профессор
Отправить личное сообщение для Vlasenko Fedor Посмотреть профиль Найти все сообщения от Vlasenko Fedor
 
Регистрация: 13.03.2013
Сообщений: 1,572

<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?
Ответить с цитированием
  #10 (permalink)  
Старый 08.01.2014, 18:34
Аватар для Hapson
Кандидат Javascript-наук
Отправить личное сообщение для Hapson Посмотреть профиль Найти все сообщения от Hapson
 
Регистрация: 23.07.2013
Сообщений: 122

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 раскрашивали текст, а не вылезали как есть
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
dragleave работает как mouseout, а не mouseleave? danik.js Events/DOM/Window 17 17.09.2013 17:17
Управление скроллом "а-ля тач" HonesT Элементы интерфейса 2 27.08.2013 14:25
Решение проблемы кодировок для AJAX и PHP без iconv (cp1251 в AJAX) Serge Ageyev AJAX и COMET 10 24.04.2013 20:48
не работает скрипт как ссылка Abraham jQuery 31 14.06.2011 03:04
Как работает обработчик onMouseMove() bayah Общие вопросы Javascript 3 29.04.2010 14:36