(La)TeX на Хабрахабре

    Привет, хабр.


    Вопрос о нативном отображении формул на хабре есть достаточно давно (сам я не так давно писал в техподдержку с этим вопросом, получил ответ, что в планах есть, но пока всё очень неопределённо), и сегодня (а, точнее, уже вчера) был поднят в комментариях к "Магия тензорной алгебры: Перезагрузка". А если заглянуть в хаб по 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);
    
    Ctrl+C, F12 и Ctrl+V.
    При желании можно использовать как букмарклет, добавив в начале `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

      +4
      Если у вас Хром, вот удобный плагин.

      Но, все же, ждем когда TM подключат MathJax нативно, добавив, например, галочку в форме создания топика "использовать tex", чтобы не ломать совместимость. Без нативной поддержки действительно работающим способом является только картинки...
        +1
        P.S. С данным конкретно плагином — tex дописывать не нужно, а то он тоже отображается в формуле. И вообще странное требование — дописывать tex. С одной стороны понятно, что это для совместимости, с другой — вроде как не особо стандарт.

        А вообще было бы круто использовать еще больше возможностей латеха. Например, автоматически генерировать содержание с ссылками, референсы и подобное. Но это уже слишком рокетсайнс, судя по всему.
          +1
          "В прошлом году товар xx стоил 20$, а в этом — 30$". Внезапно, строка ", а в этом — 30" превратилась в формулу.
          Я просто перестраховался, видел вообще вариант с $latex… $.

          Со стандартом не знаком, если честно, так что могу в чём-то ошибаться.

          Часть возможностей латеха, если ничего не путаю, MathJax поддерживает — нумерацию формул, например.
            +1
            Да в wordpress.com именно $latex… $ используют, а недавно ещё появились темы с annotum где всё ещё как-то по-другому можно делать. Я так и не понял, что и где они конкретно используют, но инициатором ввода LaTeX лет 9 назад по-видимому был Теренс Тао, — значит, понадобились усилия одного лауреата премии Филдса по математике, чтобы там установили LaTeX разметку ...
          +2
          Кто-то из них писал, что против MathJax потому, что это не будет работать в RSS и т.д. Нужно рендерить картинки, а это им как всегда лень.
          0
          Я не понял что с этим делать:
          " При желании можно использовать как букмарклет, добавив в начале `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», а более сложные можно и картинками выложить, не вижу большой проблемы.
            0
            Вы, случаем, не из тех, кто пугается слова "букмарклет"? :)

            Там прямо под кодом всё написано:

              +3
              Отлично. Копирую, жму F12, открывается Инспектор (инструменты разработчика), жму вставить — ничё не происходит.

              Нет, что вы — я не из тех, кто пугается каких-либо слов. Я из тех, кто не хочет делать лишних телодвижений, если они не являются необходимыми и если без них, вроде как, всё неплохо.
                +1
                Нажмите Enter.

                Если вы, как и я, понимаете TeX, и для вас формула неплоха и в таком виде: $$tex \frac{1}{\pi} = \frac{2 \sqrt 2}{9801} \sum_{k=0}^{\infty} \frac{(4k)!(1103 + 26390k)}{(k!)^4 396^{4k}} $$, то без проблем, я вас не заставляю.
                  +1
                  Сюда
                  image

                  вставлять нужно
                    0
                    А, в консоль чтоли… понятно, заработало.

                    А как теперь это сохранить «как букмарклет», чтоб оно само подгружалось?
                      0
                      Создать закладку с текстом javascript:v=document.createElement('script')«...»


                      Ну и после загрузки страницы один раз кликнуть по ней
                        +1
                        Ах, так это ещё кликать надо по ней? Ну нет, это уже как-то слишком костыльно =)
                          +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);

                          Автоматическая подгрузка скрипта будет срабатывать на всех страницах Хабра
                            +2
                            Или TamperMonkey для хрома, если ничего не путаю.
                      0
                      Эх, плохо я соображаю в 3 часа ночи.
                      Спасибо.
                +2
                Полностью поддерживаю идею TeXа, но идея костылей мне кажется не слишком удачной. Во-первых, это требует от читателя действий, а сидя в метро с планшетом, как-то не хочется никаких действий, да и не удобно проводить махинации. Во-вторых, костыли не обладают обратной совместимостью (ну кроме картинок, как лобового варианта) — значит старые статьи в какой-то момент поломаются, когда введут нормальный ТеХ. В-третьих, это попытка переложить административную задачу на сообщество и, мне кажется, что это отличный случай попытаться донести важность данного вопроса и провести нормальное внедрение ТеХа.
                  +1
                  С этим трудно спорить, да и не имеет смысла, вы правы.
                  Единственное, что замечу: обратная совместимость всё же некоторая есть. TeX традиционно обрамляется знаками $$ с обоих сторон, и все счастливы-довольны. Правда, я, посчитав, что подобное вполне может встретиться в ином контексте, решил заменить на более специфичное $tex и $$tex.
                  В общем, обратная совместимость полностью зависит от того, какой вариант будет введён. Может быть, будет вообще тег math, тогда да. А, может, и стандартные $$.
                  +6
                  эм… Кхм… а для тех, кто не знаком с веб программированием (представьте да, такие среди читающих хабр есть), что именно делает этот скрипт?

                  ps. Вообще как-то часто сталкиваюсь с тем, что веб разработчики чем-то похожи на москвичей.

                  • А где вы живете?
                  • У метро X
                  • Извините, а это где?
                  • Ой, так вы не в Москве живете?
                    +1
                    И в самом деле, простите, не подумал :).

                    Подключает библиотеку MathJax, которая пробегается по всей странице, ищет заключённые в $tex тут формула $ (и т.п.) формулы и приводит их в красивый вид.

                    Выше есть такой фрагмент:


                    Который после исполнения скрипта превращается в...


                    Что приятно, работает везде, в том числе и в комментариях, выше комментарий от Psychosynthesis, содержащий скопированный TeX, там точно так же.
                      +5
                      Вот как, теперь понятно. Но это не решение проблемы, а наоборот создание новых проблем. Статьи на Хабр пишутся для людей, а не для ограниченного круга лиц, которые прочитали вашу статью и сделали вышеуказанные действия. В данном случае автору проще воспользоваться сделанными для этого сервисами , чем десяткам тысяч читателей прописывать что-то непонятное в консоль.
                        +3
                        Не говоря уже о том, что, если в каждой первой статье не глядя вставлять указанный там код в консоль, рано или поздно можно наткнуться на что-нибудь левое.

                        Идея нежизнеспособна, можно просто считать её демонстрацией, как легко добавляется поддержка (La)TeX.
                        Я просто показал ещё один вариант, тоже костыль, чем-то лучше, чем-то хуже. В отличие от картинок, здесь более качественные шрифты (чем во многих местах), всегда можно посмотреть оригинал формулы, есть масштабирование и много других хороших вещей. Минусы сводят их все на нет, увы.

                        Ну и, если кому-то сильно-сильно понадобятся нативные формулы на хабре (до того, как их поддержку введут), то вот, вариант выше.
                          +3
                          можно просто считать её демонстрацией, как легко добавляется поддержка (La)TeX.

                          Согласен, но демонстрация хорошая

                          В отличие от картинок, здесь более качественные шрифты

                          Math Text Editor использует SVG. И Формулы, особенно на экране смартфона выглядят великолепно. Никто не мешает разработчикам ориентироваться на такое же качество отображения. Это же все-таки хабр. Тем более, что давным-давно попрошенный markdown таки добавили, вместе с модификацией дизайна сайта в целом. А вот про TeX всё никак не впоминают
                            +1
                            Автоматическая подгрузка кода для определённого сайта легко осуществляется с помощью GreaseMonkey (Firefox) или Tampermonkey (для браузеров на основе Chromium).
                        +1
                        Это еще ладно, иногда сразу говорят: «Давайте через полчаса встретимся у Китай-Города».
                        +1
                        Может проще KaTeX? Он, конечно, не такой мощный, как Mathjax, но заметно более легковесный. И для большинства формул хабра его хватит.
                          0
                          Может, проще. Согласен, грузится сильно-сильно быстрее, что некритично, но приятно.
                          Меня смущает, что я его вижу впервые и не совсем понимаю, как сделать автоматический парсинг выражений в $$… $$ или тому подобных "тегах".
                            +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);

                          +2
                          MathJax всё же очень тяжёлая штука. Откройте какую-нибудь тяжёлую статью на не самом мощном устройстве (например, планшете), и будете очень долго ждать. Пример сайта: http://pomax.github.io/bezierinfo/

                          В идеале решение должно быть родным для браузера, вроде MathML. Жаль, его выпилили из Хрома.
                            +1
                            Невозможность прочитать статью без телодвижений убивает напрочь все плюсы. Ждём ТМ.

                            Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                            Самое читаемое