Парсер для JavaScript.ru

Парсер для адаптированного формата Markdown, который используется на Javascript.ru.

У него есть два режима работы:
1. Доверенный -- для статей, задач и другого основного материала. Возможны любые теги и т.п.
2. Безопасный -- для комментариев и другого user-generated content. Большинство тегов HTML можно использовать.

Вставка кода ```js`

Блок кода вставляется как в github:


`js
alert(1);
`

Или:


`html
<!DOCTYPE HTML>
<title>Viva la HTML5!</title>
`

Поддерживаемые языки (список может быть расширен): - html - js - css - coffee - php - http - java - ruby - scss - sql

`$3`

Если хочется, чтобы посетитель мог запустить код -- добавьте первую строку //+ run:


`js
//+ run
alert(1);
`

Независимо от языка можно использовать любой стиль комментария: //+ ... , /+ ... /, #+ ... или , главное чтобы он был первой строкой и в начале был плюс и пробел. Этот комментарий не попадёт в итоговый вывод.

Есть два языка, для которых это поддерживается: 1.js - в доверенном режиме через eval, в безопасном -- в iframeс другого домена. 2.html - в доверенном режиме показ будет в iframe с того же домена, в безопасном -- с другого домена.

Прочие настройки, возможные в этой же строке: -height=100 -- высота (в пикселях) для iframe, в котором будет выполняться пример. Обычно для HTML она вычисляется автоматически по содержимому. -src="my.js" -- код будет взят из файла my.js-autorun-- пример будет запущен автоматически по загрузке страницы. -refresh-- каждый запуск JS-кода будет осуществлён в "чистом" окружении. Этот флаг актуален только для безопасного режима, т.к. обычноiframeс другого домена кешируется и используется многократно. -demo - флаг актуален только для решений задач, он означает, что при нажатии на кнопку "Демо" в условии запустится этот код.

Пример ниже возьмёт код из файла my.jsи запускает его автоматически:


`js
//+ src="my.js" autorun
`

Этот пример будет при запуске показан в <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> высотой </code>100px<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">:<br /><pre><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">html<br /><br /><!DOCTYPE HTML><br /><html><br /><body><br /> <h1>Привет, мир!</h1><br /></body><br /></html><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br /></pre></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">Поддерживаются два выделения:</p><p class="my-3"><strong>Блочное выделение</strong> -- несколько строк выделяются полностью. </p><p class="my-3">Обозначается строками </code><em>!</em><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> в начале и </code><em>/!</em><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> в конце:<br /><pre><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">js<br /><em>!</em><br />function important() {<br /> alert("Важный блок");<br />}<br /><em>/!</em><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br /></pre></p><p class="my-3">Также можно выделить отдельную строку (одну), поставив в конце </code><em>!</em><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">:</p><p class="my-3"><pre><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">js<br />function important() {<br /> alert("Важная строка");<em>!</em><br />}<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br /></pre></p><p class="my-3"><strong>Инлайн-выделение</strong> выделяет фрагмент текста, например важное слово, для этого оно заключается в </code><em>!</em>...<em>/!</em><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">:<br /><pre><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">css<br /><em>!</em>h1<em>/!</em> {<br /> background: pink <em>!</em>important<em>/!</em>;<br />}<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br /></pre></p><p class="my-3">В примере выше выделятся </code>h1<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> и </code>important<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">.<br /> <br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">Для вставки кода в строку он оборачивается в обратные кавычки `...`.</p><p class="my-3">Например:<br /><pre><br />Функция </code>_.partial<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> делает то же, что и </code>bind<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, но без привязки контекста </code>this<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">.<br /></pre></p><p class="my-3">Весь HTML внутри таких кавычек автоматически экранируется и оборачивается в </code><code><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">:<br /><pre><br />Теги `<script>` и `<b>`<br />-- станет<br />Теги <code>&lt;script&gt;</code> и <code>&lt;b&gt;</code><br /></pre></p><p class="my-3">Обычно это удобно, но если экранирование не нужно -- можно использовать HTML-тег </code><code>...</code><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> напрямую:</p><p class="my-3"><pre><br />Функция <code>reduce<em>Right</em></code><br /></pre></p><p class="my-3">После открывающей и перед закрывающей обратными кавычками ` не должно быть пробелов, такой текст не будет отформатирован:<br /><pre><br />От ` до `<br /></pre></p><p class="my-3">Это позволяет избежать неверных интерпретаций в тексте. <br />Если нужно вставить именно саму обратную кавычку, а она воспринимается как код - используйте Unicode-entity: </code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">.</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Показ примеров в </code><iframe><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></h2></p><p class="my-3">Во-первых, заметим, что любой js/html-код можно сделать запускаемым, добавив в начало </code>//+ run<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">.</p><p class="my-3">При этом HTML будет при запуске показываться в </code><iframe><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> снизу. Можно даже добавить </code>autorun<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> для автозапуска при загрузке страницы.</p><p class="my-3">ББ-теги, описанные ниже, дают альтернативные способы показа примера. </p><p class="my-3">Для того, чтобы они работали, пример должен быть <em>в отдельной директории без поддиректорий</em>, выложенной как plunk при помощи утилиты https://github.com/iliakan/plunk.<br />Кроме того, в примере должен быть файл </code>index.html<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">.</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">ББ-тег </code>[iframe]<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> позволяет показать пример в действии в </code><iframe><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">'е с минимальными "декорациями".<br /> <br />Например:<br /><pre><br />[iframe src="cool-stuff"]<br /></pre></p><p class="my-3">Покажет пример </code>cool-stuff/index.html<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, без кода. <br /> <br />Параметры:<br /> - </code>height=100<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> -- высота (если автовычисленная не подходит)<br /> - </code>link<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> -- добавить в ифрейм ссылку для открытия в новом окне<br /> - </code>play<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> -- добавить в ифрейм ссылку для открытия в песочнице<br /> - </code>zip<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> -- добавить в ифрейм ссылку на скачивание архива с примером<br /> <br />Обычно чистый </code>[iframe src="..."]<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> используется для показа "как работает" пример без возможности залезть в код, например в качестве демки для задачи. </p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">Если пример содержит несколько важных файлов -- его можно показать через </code>[example]<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">.</p><p class="my-3">Это то же самое, что </code>[iframe]<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, но дополнительно над </code><iframe><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">'ом будет лента с табами файлов примера. Любой файл можно выбрать и посмотреть.</p><p class="my-3">Например:<br /><pre><br />[example src="cool-stuff"]<br /></pre></p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Сравнение </code>[compare]<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> </h2></p><p class="my-3">Для показа списка достоинств/недостатков:</p><p class="my-3"><pre><br />[compare]<br />+ WebSocket'ы дают минимальную задержку в передаче данных<br />+ WebSocket'ы позволяют непрерывно передавать данные в обе стороны<br />- Не поддерживаются в IE<10<br />[/compare]<br /></pre></p><p class="my-3">У достоинств в начале должен стоять плюс </code>+<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, у недостатков минус </code>-<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, строки без </code>±<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> недопустимы.</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Ссылки </code>[...]()<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></h2></p><p class="my-3">Ссылки можно задавать вместо </code><a href="http://wikipedia.org">Википедия</a><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> вот так:<br /><pre><br /><a href="http://wikipedia.org" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Википедия</a><br /></pre></p><p class="my-3">Для показа ссылки без особого заголовка:</p><p class="my-3"><pre><br />[http://wikipedia.org]()<br />-- станет<br /><a href="http://wikipedia.org">http://wikipedia.org</a><br /></pre></p><p class="my-3">Для ссылки на статью или задачу с сайта можно использовать только её абсолютный URL, заголовок подставится автоматически, например:</p><p class="my-3"><pre><br />Читайте об этом в главе [](/events)<br />-- станет (из базы будет получен заголовок)<br />Читайте об этом в главе <a href="/events">События</a> <br /></pre></p><p class="my-3">Для того, чтобы сослаться на заголовок, у которого есть </code>[#anchor]<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">:</p><p class="my-3"><pre><br /><a href="#instanceof" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Оператор </code>instanceof<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></a><br />-- станет (если есть статья с заголовокм [#instanceof])<br /><a href="/url-этой-статьи#instanceof">Оператор <code>instanceof</code></a><br /></pre></p><p class="my-3"><br /><h2 class="text-xl font-semibold mt-5 mb-3">Отмена форматирования </code><pre><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code>[pre]<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></h2></p><p class="my-3">Не применяется форматирование в HTML-комментариях </code><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> и тегах:<br /> - </code><script><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> </code><style><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> </code><object><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> </code><embed><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> </code><video><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> </code><audio><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> </code><pre><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">Также форматирование не будет применяться, если обернуть секцию в </code>[pre]...[/pre]<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">:<br /><pre><br />[pre]<br />В этом блоке.</p><p class="my-3">Новые строки.</p><p class="my-3">Не переносятся. И вообще, парсер не работает, просто обычный HTML.<br />[/pre]<br /></pre><br /> <br /><h2 class="text-xl font-semibold mt-5 mb-3">Заголовки #Header и якоря [#anchor]</h2></p><p class="my-3">Заголовки начинаются с символа решётки </code>#<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, сколько решёток -- такой и уровень.</p><p class="my-3">На любой заголовок можно сделать общесайтовую ссылку, добавив к нему </code>[#anchor]<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, <br />где </code>anchor<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> -- имя для </code><a name="..."><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, в который заголовок обёрнут.</p><p class="my-3">Это имя также запоминается в базе и далее в любой другой статье или задаче можно просто использовать ссылку </code><a href="#anchor" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">читайте тут</a><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br />для отправки посетителя сразу на нужный заголовок.<br /> <br /><h2 class="text-xl font-semibold mt-5 mb-3">Жирный </code><em>*<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, курсив </code></em><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, перечёркивание </code>~<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></h2></p><p class="my-3">Как в обычном Markdown:<br /><pre><br /><strong>жирный</strong><br /><em>курсив</em><br />~перечёркивание~<br /></pre></p><p class="my-3">Выделение в середине слова не работает.</p><p class="my-3"> - Перед открывающим символом должен быть пробел, а после -- нет.<br /> - После закрывающего символа должен быть побел или пунктуация, а перед -- нет пробела<br /> <br />Например:<br /><pre><br />Мой <em>красивый</em> текст -- выделение сработает<br /><em>Мой красивый текст</em> -- выделение сработает<br />Мой<em>красивый</em>текст -- выделение не сработает (внутри слова)<br />a <em> b </em> c -- выделение не сработает (пробелы вокруг *)<br /></pre></p><p class="my-3"><br /><h2 class="text-xl font-semibold mt-5 mb-3">Типографика</h2></p><p class="my-3">Автоматически заменяются:<br /> - </code>(c)<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> </code>(r)<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> </code>(tm)<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> </code>(p)<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> </code>+-<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> </code>-><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> </code><-<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> на символы </code>©<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> </code>®<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> </code>℗<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> </code>±<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> </code>→<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> </code>←<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br /> - троеточие </code>...<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> на один юникодный символ-троеточие </code>…<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br /> - одиночный дефис </code>-<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> на юникодный символ-аналог </code>–<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, двойной дефис </code>--<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> на длинное тире </code>—<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br /> - смайлы </code>:)<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> </code>:(<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> и ряд других - на картинки </code><img src="файл для смайла"><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br /> - кавычки </code>"..."<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> - на ёлочки </code>«...»<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> </p><p class="my-3">Двойной (или более) перевод строки означает параграф </code><p><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">. </p><p class="my-3">Не ставятся </code><p><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> между блочными тегами, например в таком тексте параграфа между </code><div><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> и </code><table><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> не будет:<br /><pre><br /><div> ... </div></p><p class="my-3"><table> ... </table><br /></pre></p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Сочетания клавиш </code>[key]<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></h2></p><p class="my-3">Для красивого отображения сочетаний клавиш используется бб-тег </code>[key Ctrl+Shift+P]<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">.</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Библиотеки </code>[libs]<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></h2></p><p class="my-3">Если нужны одна или несколько библиотек -- перечислите их построчно в секции </code>[libs]<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">.</p><p class="my-3">Например:<br /><pre><br />[libs]<br />http://code.jquery.com/jquery-latest.js<br />http://code.jquery.com/ui/1.10.4/jquery-ui.js<br />http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css<br />[/libs]<br /></pre></p><p class="my-3">Все они попадут в </code><head><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, CSS будут до скриптов.</p><p class="my-3">Можно перечислить не полные скрипты, а мнемо-имена, сейчас поддерживается только </code>d3<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">:</p><p class="my-3"><pre><br />[libs]<br />d3 <br />[/libs]<br />--- аналогично<br />[libs]<br />http://d3js.org/d3.v3.min.js<br />[/libs]<br /></pre></p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Скрипты и стили </code>[head]<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></h2></p><p class="my-3">Скрипты и стили, которые хочется отправить в </code><head><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, можно обернуть в </code>[head]<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">:</p><p class="my-3"><pre><br />[head]<br />$(function() {<br /> $('#slider-example').slider();<br />});<br />[/head]<br /></pre></p><p class="my-3"><br /><h2 class="text-xl font-semibold mt-5 mb-3">Неподдерживаемый Markdown</h2></p><p class="my-3"> - Списки (используйте </code><ul><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code><ol><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> и </code><dl><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">).<br /> - Таблицы (используйте </code><table>`).<br /> - Код при помощи отступов.<br /> - Подчёркивание (лучше не использовать, достаточно <em> и </em>*).<br /> - Ряд других возможностей, используемых редко и имеющих HTML-аналоги.</p></div><div class="flex justify-center absolute inset-x-0 bottom-0 bg-gradient-to-t from-background via-background to-transparent pb-4 pt-16"><button data-slot="button" class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down mr-1 h-4 w-4"><path d="m6 9 6 6 6-6"></path></svg>Show more</button></div></div></div><template id="P:3"></template><template id="P:4"></template></div></div></div><script>self.__next_f.push([1,"25:[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}]\n26:[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"*\"}]\n27:[\"$\",\"$L5\",\"lodash\",{\"href\":\"/package/lodash\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"lodash\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"*\"}]]}]\n28:[\"$\",\"$L5\",\"map-stream\",{\"href\":\"/package/map-stream\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"map-stream\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"*\"}]]}]\n29:[\"$\",\"$L5\",\"sanitize-html\",{\"href\":\"/package/sanitize-html\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"sanitize-html\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"*\"}]]}]\n2a:[\"$\",\"$L5\",\"thunkify\",{\"href\":\"/package/thunkify\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"thunkify\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"*\"}]]}]\n"])</script><script>self.__next_f.push([1,"2b:[\"$\",\"div\",null,{\"data-slot\":\"card\",\"className\":\"bg-card text-card-foreground flex flex-col gap-6 rounded-xl border shadow-sm py-4 lg:col-span-2\",\"children\":[[\"$\",\"div\",null,{\"data-slot\":\"card-header\",\"className\":\"@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6 pb-2\",\"children\":[\"$\",\"div\",null,{\"data-slot\":\"card-title\",\"className\":\"font-semibold flex items-center gap-2 text-base\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-wrench h-4 w-4\",\"children\":[[\"$\",\"path\",\"cbrjhi\",{\"d\":\"M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z\"}],\"$undefined\"]}],\"Dev Dependencies\",[\"$\",\"span\",null,{\"data-slot\":\"badge\",\"className\":\"inline-flex items-center justify-center rounded-md border px-2 py-0.5 font-medium w-fit whitespace-nowrap shrink-0 [\u0026\u003esvg]:size-3 gap-1 [\u0026\u003esvg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden border-transparent bg-secondary text-secondary-foreground [a\u0026]:hover:bg-secondary/90 ml-auto text-xs\",\"children\":9}]]}]}],[\"$\",\"div\",null,{\"data-slot\":\"card-content\",\"className\":\"px-6\",\"children\":[\"$\",\"div\",null,{\"className\":\"grid gap-1 sm:grid-cols-2 lg:grid-cols-3\",\"children\":[[\"$\",\"$L5\",\"clarify\",{\"href\":\"/package/clarify\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"clarify\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"*\"}]]}],[\"$\",\"$L5\",\"co-mocha\",{\"href\":\"/package/co-mocha\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"co-mocha\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"*\"}]]}],[\"$\",\"$L5\",\"gulp\",{\"href\":\"/package/gulp\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[\"$L2d\",\"$undefined\"]}],\"gulp\"]}],\"$L2e\"]}],\"$L2f\",\"$L30\",\"$L31\",\"$L32\",\"$L33\",\"$L34\"]}]}]]}]\n"])</script><script>self.__next_f.push([1,"2d:[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}]\n2e:[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"*\"}]\n2f:[\"$\",\"$L5\",\"gulp-jshint\",{\"href\":\"/package/gulp-jshint\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"gulp-jshint\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"*\"}]]}]\n30:[\"$\",\"$L5\",\"gulp-util\",{\"href\":\"/package/gulp-util\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"gulp-util\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"*\"}]]}]\n31:[\"$\",\"$L5\",\"mocha\",{\"href\":\"/package/mocha\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"mocha\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"*\"}]]}]\n32:[\"$\",\"$L5\",\"should\",{\"href\":\"/package/should\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"should\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"*\"}]]}]\n33:[\"$\",\"$L5\",\"sinon\",{\"href\":\"/package/sinon\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children"])</script><script>self.__next_f.push([1,"\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"sinon\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"*\"}]]}]\n34:[\"$\",\"$L5\",\"trace\",{\"href\":\"/package/trace\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"trace\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"*\"}]]}]\n"])</script><div hidden id="S:3"><div data-state="inactive" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_aav5ubrb_-trigger-dependencies" hidden="" id="radix-_R_aav5ubrb_-content-dependencies" tabindex="0" data-slot="tabs-content" class="flex-1 outline-none mt-6"></div></div><script>$RS=function(a,b){a=document.getElementById(a);b=document.getElementById(b);for(a.parentNode.removeChild(a);a.firstChild;)b.parentNode.insertBefore(a.firstChild,b);b.parentNode.removeChild(b)};$RS("S:3","P:3")</script><div hidden id="S:4"><div data-state="inactive" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_aav5ubrb_-trigger-versions" hidden="" id="radix-_R_aav5ubrb_-content-versions" tabindex="0" data-slot="tabs-content" class="flex-1 outline-none mt-6"></div></div><script>$RS("S:4","P:4")</script><script>$RC("B:1","S:1")</script></body></html>

javascript-parser

Парсер для JavaScript.ru

Вставка кода ``js

$3

Вставка кода ```js`

`$3`