Pull to refresh

TeX-like разметка на Javascript

Reading time2 min
Views2.4K
При написании console-like форума был задан вопрос: «какую разметку лучше использовать?». Среди вариантов были стандартный бб-код ([b]bold[/b]), вики-разметка(*bold*), или TeX-like разметка (\b{bold}). После недолгого совещания выбор был остановлен именно на TeX-like. Была написана небольшая библиотека, которая, по моему мнению, достаточно интересна, расширяема и гибка. Желающие посмотреть пример могут перейти по ссылке freecr.ru/TeX

Библиотека расширяется с помощью плагинов. Есть два типа плагинов — «тег» и «правило». «Тег» — это, сообственно, сам ТеХ-тег, а правило — это функция, применяемая к тексту, который не состоит в тегах. Например, для подсветки url'ов в тексте: «Итак по адресу www.example.com мы видим \b{сайт-пример}».
Пример добавления правила:

TeX.addRule ({
  name : 'liveUrls',
  func : function (string) {
    var urlRE = /((git|svn|ftp|http|https):\/\/(www\.)?|www.)(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/gi;
    return string.replace(urlRE, function(url) {
      var urlFull = (url.indexOf('www') === 0) ? "http://" + url : url;
      return "<a class='url' href='" + urlFull + "'>" + url + "</a>";
    });
  }
})
;

Тег добавляется по такому самому принципу:
TeX.addTag ({
  name : 'b',
  args : [1],
  func : function (args) {
    return "<b>" + TeX.markup(args[0]) + "</b>";
  }
});


* This source code was highlighted with Source Code Highlighter.


Единственное существенное отличие — наличие свойства args у тега. Оно может принимать массив чисел, или строку 'unlimited'. Таким образом, мы указываем, сколько параметров может принять аргумент: например, code может принять два параметра — язык и сам код, или один — только код. Тогда значение будет args: [1, 2] и он примет массив аргуметов с одним или двумя значениями.

Все символы внутри тега не обрабатываются никакими правилами, потому, если необходимо, чтобы обрабатывались, можно вызвать рекурсиво TeX.markup для соответствующего аргумента.

Думаю, понятнее всего принципы работы будут на примере кода:
Сама либа: http://pastebin.com/f46087804

Плагины: http://pastebin.com/f7840dc97

Ну и для затравки — пример более расширенного плагина, реализующего ксс-подсветку, а-ля:
\style{float:right}{border:dotted red 2px}{background:#fcc}{text-align:justify}{padding:25px 100px}{display:block}{text is here}

http://pastebin.com/f4e75d3f6

Лицензия — LGPL.
Либа достаточно свежая и мало тестировалась, потому возможна некорретная работа.
Tags:
Hubs:
+18
Comments35

Articles

Change theme settings