Привет, хабр.
Вопрос о нативном отображении формул на хабре есть достаточно давно (сам я не так давно писал в техподдержку с этим вопросом, получил ответ, что в планах есть, но пока всё очень неопределённо), и сегодня (а, точнее, уже вчера) был поднят в комментариях к "Магия тензорной алгебры: Перезагрузка". А если заглянуть в хаб по LaTeX, то сразу же 2 последние статьи — на тему оформления формул в статьях хабра.
Самое интересное, что в принципе подключить поддержку TeX / LaTeX к любому сайту — дело пары минут и пары строк кода: достаточно подключить MathJax, ставшую уже почти что стандартной в задаче отображения формул в браузере.
Традиционно для формул на хабре используются картинки, однако всё вышесказанное наводит на вполне определённую мысль, что есть и другой вид костылей. С одной стороны, менее удобный, с другой — более.
…
Вот он:
v=document.createElement('script');v.type='text/x-mathjax-config';v.textContent="MathJax.Hub.Config({tex2jax:{inlineMath:[['$tex','$']],displayMath:[['$$tex','$$']]},asciimath2jax:{delimiters:[['$asc','$']]}});";s=document.createElement('script');s.src='//cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-MML-AM_CHTML&locale=ru';document.head.appendChild(v);document.head.appendChild(s);
При желании можно использовать как букмарклет, добавив в начале `javascript:`
Аудитория хабра — не те люди, которых можно испугать консолью браузера или букмарклетом, правда ведь?
Инлайновый TeX вставляется в
$tex ...$, отдельным абзацем — в $$tex ... $$, и помимо этого есть поддержка AsciiMath в $asc ... $.Ну и живые примеры конечно же:
$$tex \frac{1}{\pi} = \frac{2 \sqrt 2}{9801} \sum_{k=0}^{\infty} \frac{(4k)!(1103 + 26390k)}{(k!)^4 396^{4k}} $$
Или вот инлайновая формула: $tex e^{ \frac{d}{dt} } = 1 + \frac{1}{1!}\; \frac{d}{dt} + \frac{1}{2!}\;\frac{d^2}{dt^2} + \frac{1}{3!}\;\frac{d^3}{dt^3} + \cdots $.
Минусы всего этого не менее очевидны, и, по правде говоря, заставляют сомневаться в жизнеспособности идеи, но, как минимум, как эксперимент — интересно, имхо. Что думаете?
Комментарии (30)
Psychosynthesis
04.03.2016 01:38Я не понял что с этим делать:
" При желании можно использовать как букмарклет, добавив в начале `javascript:`"
Может я и тупой для понимания этого «решения», но, сдаётся мне, что большая часть аудитории, увидев вместо формул:
$$tex \frac{1}{\pi} = \frac{2 \sqrt 2}{9801} \sum_{k=0}^{\infty} \frac{(4k)!(1103 + 26390k)}{(k!)^4 396^{4k}} $$
Пойдёт читать другие посты, а не искать как ей воспользоваться каким-то волшебным костылём, ещё и с JS. Алсо, для более-менее простых формул вполне достаточно пары «sup» и «sub», а более сложные можно и картинками выложить, не вижу большой проблемы.
Keyten
04.03.2016 01:56Вы, случаем, не из тех, кто пугается слова "букмарклет"? :)
Там прямо под кодом всё написано:
Psychosynthesis
04.03.2016 02:54+3Отлично. Копирую, жму F12, открывается Инспектор (инструменты разработчика), жму вставить — ничё не происходит.
Нет, что вы — я не из тех, кто пугается каких-либо слов. Я из тех, кто не хочет делать лишних телодвижений, если они не являются необходимыми и если без них, вроде как, всё неплохо.Keyten
04.03.2016 03:05+1Нажмите Enter.
Если вы, как и я, понимаете TeX, и для вас формула неплоха и в таком виде: $$tex \frac{1}{\pi} = \frac{2 \sqrt 2}{9801} \sum_{k=0}^{\infty} \frac{(4k)!(1103 + 26390k)}{(k!)^4 396^{4k}} $$, то без проблем, я вас не заставляю.
maisvendoo
04.03.2016 06:42+1Сюда
Psychosynthesis
04.03.2016 12:22А, в консоль чтоли… понятно, заработало.
А как теперь это сохранить «как букмарклет», чтоб оно само подгружалось?
sielover
04.03.2016 12:44Создать закладку с текстом javascript:v=document.createElement('script')«...»
Ну и после загрузки страницы один раз кликнуть по нейPsychosynthesis
04.03.2016 13:27+1Ах, так это ещё кликать надо по ней? Ну нет, это уже как-то слишком костыльно =)
lexasss
04.03.2016 14:03+2Установите GreaseMonkey, создайте новый скрипт и вставьте в него вот это:
// ==UserScript== // @name LaTeX for Habrahabr // @include https://habrahabr.ru/* // @version 1 // ==/UserScript== v = document.createElement('script'); v.type = 'text/x-mathjax-config'; v.textContent = 'MathJax.Hub.Config({tex2jax:{inlineMath:[[\'$tex\',\'$\']],displayMath:[[\'$$tex\',\'$$\']]},asciimath2jax:{delimiters:[[\'$asc\',\'$\']]}});'; s = document.createElement('script'); s.src = '//cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-MML-AM_CHTML&locale=ru'; document.head.appendChild(v); document.head.appendChild(s);
Автоматическая подгрузка скрипта будет срабатывать на всех страницах Хабра
varagian
04.03.2016 02:05+2Полностью поддерживаю идею TeXа, но идея костылей мне кажется не слишком удачной. Во-первых, это требует от читателя действий, а сидя в метро с планшетом, как-то не хочется никаких действий, да и не удобно проводить махинации. Во-вторых, костыли не обладают обратной совместимостью (ну кроме картинок, как лобового варианта) — значит старые статьи в какой-то момент поломаются, когда введут нормальный ТеХ. В-третьих, это попытка переложить административную задачу на сообщество и, мне кажется, что это отличный случай попытаться донести важность данного вопроса и провести нормальное внедрение ТеХа.
Keyten
04.03.2016 04:02+1С этим трудно спорить, да и не имеет смысла, вы правы.
Единственное, что замечу: обратная совместимость всё же некоторая есть. TeX традиционно обрамляется знаками $$ с обоих сторон, и все счастливы-довольны. Правда, я, посчитав, что подобное вполне может встретиться в ином контексте, решил заменить на более специфичное $tex и $$tex.
В общем, обратная совместимость полностью зависит от того, какой вариант будет введён. Может быть, будет вообще тег math, тогда да. А, может, и стандартные $$.
myxo
04.03.2016 02:39+6эм… Кхм… а для тех, кто не знаком с веб программированием (представьте да, такие среди читающих хабр есть), что именно делает этот скрипт?
ps. Вообще как-то часто сталкиваюсь с тем, что веб разработчики чем-то похожи на москвичей.
- А где вы живете?
- У метро X
- Извините, а это где?
- Ой, так вы не в Москве живете?
Keyten
04.03.2016 02:45+1И в самом деле, простите, не подумал :).
Подключает библиотеку MathJax, которая пробегается по всей странице, ищет заключённые в$tex тут формула $(и т.п.) формулы и приводит их в красивый вид.
Выше есть такой фрагмент:
Который после исполнения скрипта превращается в...
Что приятно, работает везде, в том числе и в комментариях, выше комментарий от Psychosynthesis, содержащий скопированный TeX, там точно так же.myxo
04.03.2016 03:35+5Вот как, теперь понятно. Но это не решение проблемы, а наоборот создание новых проблем. Статьи на Хабр пишутся для людей, а не для ограниченного круга лиц, которые прочитали вашу статью и сделали вышеуказанные действия. В данном случае автору проще воспользоваться сделанными для этого сервисами , чем десяткам тысяч читателей прописывать что-то непонятное в консоль.
Keyten
04.03.2016 03:55+3Не говоря уже о том, что, если в каждой первой статье не глядя вставлять указанный там код в консоль, рано или поздно можно наткнуться на что-нибудь левое.
Идея нежизнеспособна, можно просто считать её демонстрацией, как легко добавляется поддержка (La)TeX.
Я просто показал ещё один вариант, тоже костыль, чем-то лучше, чем-то хуже. В отличие от картинок, здесь более качественные шрифты (чем во многих местах), всегда можно посмотреть оригинал формулы, есть масштабирование и много других хороших вещей. Минусы сводят их все на нет, увы.
Ну и, если кому-то сильно-сильно понадобятся нативные формулы на хабре (до того, как их поддержку введут), то вот, вариант выше.maisvendoo
04.03.2016 06:55+3можно просто считать её демонстрацией, как легко добавляется поддержка (La)TeX.
Согласен, но демонстрация хорошая
В отличие от картинок, здесь более качественные шрифты
Math Text Editor использует SVG. И Формулы, особенно на экране смартфона выглядят великолепно. Никто не мешает разработчикам ориентироваться на такое же качество отображения. Это же все-таки хабр. Тем более, что давным-давно попрошенный markdown таки добавили, вместе с модификацией дизайна сайта в целом. А вот про TeX всё никак не впоминают
lexasss
04.03.2016 14:14+1Автоматическая подгрузка кода для определённого сайта легко осуществляется с помощью GreaseMonkey (Firefox) или Tampermonkey (для браузеров на основе Chromium).
ValdikSS
04.03.2016 14:55+1Это еще ладно, иногда сразу говорят: «Давайте через полчаса встретимся у Китай-Города».
sielover
04.03.2016 10:58+1Может проще KaTeX? Он, конечно, не такой мощный, как Mathjax, но заметно более легковесный. И для большинства формул хабра его хватит.
Keyten
04.03.2016 14:25Может, проще. Согласен, грузится сильно-сильно быстрее, что некритично, но приятно.
Меня смущает, что я его вижу впервые и не совсем понимаю, как сделать автоматический парсинг выражений в $$… $$ или тому подобных "тегах".lexasss
04.03.2016 15:25+1Там ещё один скрипт добавить надо (auto-render). Но KaTeX выбрасывает ошибку на тех местах где между $$ стоит некорректный LaTeX код: при обработке этой статьи такое встречается в некоторых ваших комментариях. При этом у самого katex можно установить options.throwOnError в false (наверное, он будет игнорировать такие места), но этот параметер не регулируется через auto-render (renderMathInElement)
Код для GreaseMonkey// ==UserScript== // @name LaTeX for Habr // @include https://habrahabr.ru/* // @version 1 // @grant none // ==/UserScript== var loaded = 0; // Load KaTeX CSS var css = document.createElement('link'); css.rel = 'stylesheet'; css.href = '//cdnjs.cloudflare.com/ajax/libs/KaTeX/0.5.1/katex.min.css'; // Load KaTeX var js_katex = document.createElement('script'); js_katex.src = '//cdnjs.cloudflare.com/ajax/libs/KaTeX/0.5.1/katex.min.js'; js_katex.onload = run; // Load AutoRun var js_auto = document.createElement('script'); js_auto.src = '//cdnjs.cloudflare.com/ajax/libs/KaTeX/0.5.1/contrib/auto-render.min.js'; js_auto.onload = run; function run() { if (++loaded != 2) { return; } try{ renderMathInElement( document.body, {delimiters: [{left: "$$", right: "$$", display: true}]} ); } catch (e) { console.log('error', e); } } document.head.appendChild(css); document.head.appendChild(js_katex); document.head.appendChild(js_auto);
Aingis
04.03.2016 17:32+2MathJax всё же очень тяжёлая штука. Откройте какую-нибудь тяжёлую статью на не самом мощном устройстве (например, планшете), и будете очень долго ждать. Пример сайта: http://pomax.github.io/bezierinfo/
В идеале решение должно быть родным для браузера, вроде MathML. Жаль, его выпилили из Хрома.
Randl
05.03.2016 07:02+1Невозможность прочитать статью без телодвижений убивает напрочь все плюсы. Ждём ТМ.
kahi4
Если у вас Хром, вот удобный плагин.
Но, все же, ждем когда TM подключат MathJax нативно, добавив, например, галочку в форме создания топика "использовать tex", чтобы не ломать совместимость. Без нативной поддержки действительно работающим способом является только картинки...
kahi4
P.S. С данным конкретно плагином — tex дописывать не нужно, а то он тоже отображается в формуле. И вообще странное требование — дописывать tex. С одной стороны понятно, что это для совместимости, с другой — вроде как не особо стандарт.
А вообще было бы круто использовать еще больше возможностей латеха. Например, автоматически генерировать содержание с ссылками, референсы и подобное. Но это уже слишком рокетсайнс, судя по всему.
Keyten
"В прошлом году товар xx стоил 20$, а в этом — 30$". Внезапно, строка ", а в этом — 30" превратилась в формулу.
Я просто перестраховался, видел вообще вариант с $latex… $.
Со стандартом не знаком, если честно, так что могу в чём-то ошибаться.
Часть возможностей латеха, если ничего не путаю, MathJax поддерживает — нумерацию формул, например.
quverty
Да в wordpress.com именно $latex… $ используют, а недавно ещё появились темы с annotum где всё ещё как-то по-другому можно делать. Я так и не понял, что и где они конкретно используют, но инициатором ввода LaTeX лет 9 назад по-видимому был Теренс Тао, — значит, понадобились усилия одного лауреата премии Филдса по математике, чтобы там установили LaTeX разметку ...
kafeman
Кто-то из них писал, что против MathJax потому, что это не будет работать в RSS и т.д. Нужно рендерить картинки, а это им как всегда лень.