Как вставить latex в html
Каков наилучший способ встраивания LaTeX в веб-страницу?
Я не спрашиваю о преобразовании документа LaTeX в html.
то, что я хотел бы сделать, это каким-то образом использовать команды LaTeX math в html-документе и правильно отображать их в браузере. Это может быть сделано на стороне сервера или клиента.
9 ответов
MediaWiki может делать то, что вы ищете. Он использует Texvc (http://en.wikipedia.org/wiki/Texvc) который » проверяет (AMS) латексные математические выражения и преобразует их в HTML, MathML или PNG-графику.»Похоже на то, что вы ищете.
Проверьте статью Википедии о том, как они обрабатывают математические уравнения здесь:http://en.wikipedia.org/wiki/Help:Formula. Они также имеют обширную ссылку на латекс и плюсы / минусы различного рендеринга типы (PNG / MathML / HTML).
MediaWiki использует подмножество разметки TeX, включая некоторые расширения из латекса и AMS-латекс, для математического формулы. Он генерирует либо PNG изображения или простая разметка HTML, в зависимости от предпочтений пользователя и сложность выражения. В будущее, поскольку больше браузеров умнее, он сможет генерировать расширенные HTML или даже MathML во многих случаях. (См. blahtex для получения информации о текущая работа по добавлению MathML поддержка.)
предпочитаю MathJax над решениями, которые выбирают для рендеринга изображений (что вызывает проблемы с псевдонимами).
MathJax-это движок рендеринга Javascript с открытым исходным кодом для математики. Он использует CSS и Webfonts вместо изображений или flash и может отображать LaTeX или MathML. Таким образом, у вас нет проблем с масштабированием, и он даже совместим с screenreader.
Я когда-то разработал плагин jQuery, который делает на самом деле это: jsLaTeX
вот самый простой пример того, как его можно использовать:
выше будет генерировать следующее уравнение LaTeX на Вашей странице:
на Демо-Страницы плагина содержит больше примеров кода и демо.
Если вы хотите встроить математику в виде изображений, вы можете взглянуть на MathTran.
Если вы предпочитаете, чтобы математика вставлялась на страницу в основном как текст (используя изображения только при необходимости), jsMath может быть то, что вы ищете.
исторически, рендеринг LaTeX и извлечение изображения были лучшим выбором для кросс-платформенной, кросс-браузерной математики. Все больше и больше MathML становится разумной альтернативой. здесь онлайн-конвертер, который будет испускать MathML из разметки Tex, которую вы можете встроить в свою веб-страницу. Я знаю, что браузеры на основе Gecko, такие как Firefox и Camino, хорошо играют с MathML, как и Opera. IE не работает из коробки, но есть доступные плагины (например,этот один).
Я прочитал все ответы здесь, и я удивлен, что никто не упомянул конвертацию из PDF в HTML. Если вы используете pdf2htmlEX это создать идеальные веб-страницы из pdf. Вам просто нужно скомпилировать latex в pdf (pdflatex).
по умолчанию он генерирует один html-файл с содержимым вашего PDF, сделанным из CSS, javascript и html. Я пробовал много инструментов для преобразования latex в html, и это, безусловно,лучшее и простое решение I найдено.
Equations in HTML (SVG + GIF)
The CodeCogs LaTeX Engine is designed specifically to create equations for placement on intranets and the Internet.
The simplest way to get started is by using the Equation Editor, which produces HTML-friendly code in the yellow box at the bottom of the editor. You can then copy this code into any HTML page and an equation will appear.
For more advanced use, you can use one or more of the methods demonstrated on this page.
Tag (Editor type=»html»)
At the simplest and most fundamental level, equations can be created using a single HTML image tag. For example, the following HTML code:
This image tag is used extensively by those who need to show equations in third-party forums, blogs, or on their websites. It allows equations to be created without installing any additional code. This GIF format is the most common, as it works across all known browsers. Unfortunately, GIFs are not adequate for printing. The GIF is a raster image, with only 100 dpi; whereas, for printing, you need about 300 dpi.
An alternative is to use SVG, which is a new vector-based graphics format. This is rapidly becoming standard across all browsers. Currently, only Internet Explorer doesn’t accept SVG. However, various flash plugins rectify this. Therefore, you can use:
This should look identical to the earlier image; however, if you print this page or zoom in, you will notice a significant difference.
Automatic Equations for Whole Pages
JavaScript Options
CSS Style
All you need to do is load the script http://latex.codecogs.com/latexit.js in the header of your page:
We have developed two methods for doing this:
Add attribute lang=»latex» to tags
Adding the attribute lang=»latex» to any tag will automatically treat the content of that tag as a LaTeX equation and covert it into a graphical form. For example:
Thus, a complete HTML would be:
The third formula is not converted because lang=»latex» was not entered against the second tag.
This equation \frac<1+sin(x)>
If you are writing many equations, or if you prefer the usual LaTeX techniques for entering equations within text, then you may choose a variant on the above method that converts \\[. \\] and \$. \$ into block and inline equations, respectively. For example:
Given than \$ is often used within javascript (particularly in jQuery) that might otherwise exist on a page, we recommend constraining this general LaTeX conversion to certain tags. Typically these might be
This approach is not enabled by default, so you have to call LatexIT.add(‘p’,true); to identify the tags that you want to be treated in this way. The following example illustrate a complete HTML page with a variety of equations written in native LaTeX form:
Equation CSS Formatting
If you adopt a convention of using
In the following example, we place our equation within a
Как вставить latex в html
В последующих раздела я изложу очень короткое введение в LaTeX, но всем, кто хочет изучить LaTeX, я бы рекомендовал Не столь краткое введение в LaTeX [Not So Short Introduction to LaTeX]. Этот 95-страничный документ можно бесплатно скачать из Сети: смотрите в Дополнительные источники.
LaTeX устанавливается вместес большинс твом современных Linux-дистрибутивов. Проверить правильность его установки можно с помощью команды:
Моя система отзывается на нее так:
Общая структура документа
Вот пример очень короткого, но, тем не менее, полноценного документа LaTeX:
Преамбула данного выше примера содержит лишь одну команду: \pagestyle
Синтаксис
Задание структуры документа
В зависимости от documentclass LaTeX знает о трех или четырех уровнях заголовков. В класс article три уровня разделов, в то время, как в классе book сожержит главу в качестве четвертого заголовка самого верхнего уровня.
\chapter< Название главы > % только в классах book и report
\subsubsection< Заголовок подраздела подраздела >
Обратите внимание, что как и в POD, команды секционирования работают подобно разделителям. Они не группируют текст с помощью маркировки начала и окончания раздела, но простое их появление задает деление текста на группы. Как вы увидите в следующем месяце, в DocBook все иначе.
Списки
В состав LaTeX входит три окружения для создания списков:
Собственно элементы списка вводятся командой » \item » и могут состоять из нескольких абзацев.
Примеры:
Список из ненумерованных элементов Нумерованный список Список описаний
Перекрестные ссылки
Примеры использования \ref :
Пример использования \pageref :
Определение собственных команд и окружений
Одним из главных преимуществ системы предпечатной подготовки LaTeX является то, что пользователь имеет возможность определять собственные команды и окружения. Скажем, вы хотите использовать специальную разметку для всех заменяемых параметров в описании утилиты UN*X, например чтобы:
отображалась, скажем, так:
где команды \utilityname и \replaceable переключают, соответственно, шрифт «жирность» и «курсивность» шрифта. Использование команд \utilityname и \replaceable позволит сделать оформление всего документа последовательным:
Для того, чтобы определить новую команду LaTeX, воспользуйтесь
\newcommand< имя-команды >[ число-аргументов ]< последовательность команд >
Для нашего примера, определим \utilityname и \replaceable следующим образом:
Предопределенные комнады \textbf и \textit переключают стиль шрифта на текстовой полужирный (в противоположность математическому полужирному шрифту) и тектсовой курсивный соответственно. Аргументы обозначаются # цифра, где цифра может принимать значения от 1 до 9.
Для того, чтобы дать представление о полезности наши «свежеопределенных» команд, предположим, что мы хотим сгенерировать указатель для всех утилит, упомянутых в тексте. Команда \index< термин > помещает термин в указатель. Для этого нам достаточно лишь изменить определение \utilityname :
и все! (Для любопытных: уровни индексов разделяются символами вертикальной черты. Так что, вероятно, мы предпочтем команду \index
Новые окружения определяются так:
\newenvironment< имя-окружения >[ число-аргументов ]< стартовая-последовательность >< завершающая-последовательность >
главное отличие заключается в том, что \newenvironment две командные последовательности: одна, starting-sequence, открывает окружение, а другая, ending-sequence, завершает его. Продолжая пример с оформлением цитат, выровненых по правому краю, мы определим собственное окружение для оформления цитат:
которое можно будет использовать так:
Физическая разметка [Inline Markup]
LaTeX предоставляет богатейшие возможности физической разметки, меняющей внешний вид текста. Здесь я ограничусь обсуждением лишь тех трех команд, которые уже упоминались при обсуждении формат «Старой, доброй и простой документации Perl» [Perl’s plain old documentation]: выделения (эмфазы), курсива, полужирного и машинописного стиля шрифта.
Последовательность вызова утилит LaTeX
Обычно файлы LaTeX имеют расширение tex. Эти tex-файлы преобразуются в так называемые файлы, не зависящие от устройства (dvi). dvi файлы являются двоичным представлением исходного текста. Их можно просмотреть в консольном режиме с помощью dvisvga (при условии, что терминал поддерживает графику высокого разрешения), или, например, с помощью xdvi в среде X11. Часто файлы dvi преобразуют в Postscript с помощью dvips. Если предпочтителен формат PDF, то утилита pdflatex может создать pdf из tex за один шаг.
latex2html
Пока все нормально. LaTeX позволяет подготовить великолепно выглядящие документы на Postscript’е, а «единоутробная» утилита pdf делает то же самое, но в переносимом формате документов. Разве мы не говорили, что нам нужет и HTML тоже? Конечно говорили! Но тут LaTeX нам не помощник, для этого нам нужен другой инструмент: latex2html. Эта утилита преобразует исходные файлы LaTeX в набор html-файлов, связанные гиперссылками в соответствии со структурой исходного документа.
Загрузить latex2html можно с его домашней страницы: http://www.latex2html.org. Можно взять его и на http://www.ctan.org, а лучше с одного из зеркал. Для того, чтобы выяснить, установлен ли latex2html в вашей системе выполните команду:
должно быть что-то вроде этого:
в преамбулу вашего документа. Теперь файл my_document.tex может быть преобразован в HTML следующим вызовом
Еще раз о ссылках
latex2html берет на себя заботу практически обо всех проблемах, возникающих при преобразовании файла LaTeX в набор html-файлов. Однако ссылки на другие части того же документа или на другие документы концептуально отличаются в печатной документации и HTML. Рассмотрим следующий фрагмент LaTeX
в котором LaTeX послушно заменяет \pageref
Ниже мы обобщим наши результаты, используя цилиндрическую систему координат. Смотрите определение координатной системы на странице [*].
Latex2html нуждается в нашей помощи! Для экранной версии, абзац с ссылкой нужно перефразировать, например так:
\hyperref[ тип-ссылки ]< текст для html-версии >< текст, предшествующий ссылке в LaTeX-версии >< текст, следующий за ссылкой в LaTeX версии >
Необязательный параметр тип-ссылки устанавливает, какой счетчик будет использоваться ссылкой:
Вот наш пример, переписанный с использованием \hyperref
LaTeX преобразует это так
Ниже мы обобщим наши результаты, используя цилиндрическую систему координат. Смотрите определение координатной системы на странице 97.
а latex2html создает
после обработки того же исходного текста.
Гиперссылки
\htmladdnormallink< текст ссылки >< универсальный локатор ресурса >
\htmladdnormallinkfoot< текст ссылки >< универсальный локатор ресурса >
В HTML версии обе команды генерируют гиперссылку вида URL«>текст ссылки. В LaTeX версии первая только вставляет текст ссылки, полностью подавляя вывод части URL. Вторая команда добавляет к этому сноску, содержащую универсальный локатор ресурса. Типичным примером применения этих команд может служить следующий
в LaTeX результат первой команды будет
Текст этой статьи можно скачать с нашего веб-сайта.
во втором варианте веб-сайт дополняется маркером сноски, а сама сноска с URL помещается внизу страницы. HTML в обеих случаях выглядит так
Текст этой статьи можно скачать с нашего веб-сайта.
Команды, специфичные для конкретного формата
В качестве крайнего средства можно использовать несколько команд, позволяющих автору полностью разделить текст между LaTeX и HTML версиями:
Советую прибегать к разделению текстов только в том случае, когда никакая другая специализированная команда или окружение latex2html не в состоянии создать желаемую разметку. Разделение на разные ветви всегда требует дополнительных усилий по их синхронизации.
Плюсы и минусы latex2html
Дополнительные источники
Если вам повезло, то в вашем LaTeX есть руководство в виде веб-страницю, Hypertext Help with LaTeX. В моем дистрибутиве S.u.S.E. оно установлено по адресу file:///usr/share/texmf/doc/latex/latex2e-html/ltx-2.html
Веб-руководство не может заменить начинающему ни Краткого руководства ни книги Лампорта. Но они очень полезны для «пользователя промежуточной квалификации», если под рукой нет печатного руководства.
Convert LaTeX to HTML
Is there a converter that will convert LaTeX to HTML? I have tried several services but the LaTeX diagrams and some of the maths came out weird.
I actually converted the Latex to PDF without a problem. Then I used an online PDF to HTML converter to convert from PDF to HTML. The square root signs did not appear properly and some of the Cartesian coordinate plane diagrams had nothing on them except the grid.
PDF output:
PDF->HTML output:
14 Answers 14
Using PDF as an intermediate format when converting from LaTeX to HTML is not a very good idea. LaTeX and HTML are both mostly structural markup languages, which means you use them to describe the document structure (sections, emphasize, formulas etc.), whereas PDF is mostly about the representation of your document on the screen or paper. When converting LaTeX to PDF, you lose much of the structural information, and it cannot be successfully recovered by conversion from PDF to HTML.
I have had good mileage with and would recommend pandoc for converting LaTeX to HTML output.
Pandoc provides capability for applying CSS styling to HTML output and can take care of equation rendering with e.g. MathML and citation/bibliography styling, among many other features, and is well documented.
Is there a converter that will convert LaTeX to HTML?
Yes. There are lots. But you already knew this, as evidenced by your second «question»:
I have tried several services but the LaTeX diagrams and some of the maths came out weird.
«turning out weird» could mean any number of things:
Each of these categories breaks down further and the solution may well depend on what you used to do the conversion, so as it stands, this question is unanswerable.
For diagrams, one word of general advice I would give is that it might be best to compile the diagrams separately and include them into the html by hand with tags. Diagrams are hard. The standalone package/class can help with this. See also the pgf/TikZ externalisation tag.
You may try to use pdf2htmlEX, which is a general PDF to HTML converter. You can compile the LaTeX source to PDF, and then convert the PDF to HTML via pdf2htmlEX. A good reference of pdf2htmlEX is its wiki page. The work-flows are given in the Figure 3 of the article on TUGboat: Online publishing via pdf2htmlEX HTML / PDF.
The screenshot shows the converted HTML (Ubuntu 14.04, Google Chrome 43).
Use LaTeX subsets
LaTeX and its common output formats like PDF are super complicated. Converting all of it to HTML + CSS is close to impossible.
But if you restrict yourself only to a small subset of LaTeX features it becomes feasible.
Lightweight markup languages
First I recommend that you just try to go with a simpler format like Markdown Asciidoctor, which can be converted to HTML and PDF by several implementations like pandoc.
I have come to believe that having painless HTML is more important than the infinitely many features of LaTeX.
Furthermore, Asciidoctor is extensible, so if you find anything missing, it is easy to code it up in Ruby, which is arguably much saner than LaTeX scripts.
Here is a sample article I’ve written with Asciidoctor which includes features such as ToC and image references.
For Math, there is already MathJax, and I’m very close to reaching Nirvana through KaTeX.
Softcover
Another thing to check out, but which I don’t recommend as much, is Softcover: it has a LaTeX subset which it calls Polytex that it can convert to HTML. The exact subset is not well documented, but it already handles 99.9% of what we need to make regular books as shown in their documentation https://github.com/softcover/softcover_book/tree/master/chapters : sections, lists, equations, tables, images, references. Softcover does it’s magic through Tralics, which does LaTeX to XML.
Diagrams
As Seamus said, diagrams are hard, and it is unlikely they will be part of the implementable subset any time soon, so use images, ideally generated from a sublanguage embedded in the main markup that gets passed to an external image generator. Asciidoctor for example supports this out-of-the-box.
Alternatively, generate the images through a command line tool like gplot or pyplot, and then build the PDF with a Makefile that first builds the images and then the PDF.
In my perspective none works better than LaTeXML.
Here is a ready-made docker image with latexml installed and the instructions to convert tex documents. Its very much tightly integrated with LaTeX and delivers same looking output in html as in pdf.
There is a lwarp package on CTAN which treats tikz diagrams really well: 
I’m currently developing a free open source tool that can convert LaTeX to a single HTML file. Its called PDBF (https://github.com/uds-datalab/PDBF) and runs on win/linux/mac.
Resulting HTML file is placed in the same folder as the source tex file with the same name as the source tex file.
Technical details: The PDBF compiler basically uses a regular tex engine to compile your pdf and then stores the pdf as base64 encoded javascript string in the HTML and then includes a slightly modified version of pdf.js (The free and open source pdf engine of firefox) into the HTML to display that pdf.
Hope you like my project. Feel free to contact me through github if you have suggestions or encounter bugs.
As previously observed using PDF format for converting from LaTeX to HTML is very bad idea. Here you will find a comprehensive list of programs that convert LaTeX to HTML (Note not all of those programs are capable of converting pure TeX.)
I am familiar with three of these programs: LaTeX2HTML, TeX4ht, and Hevea. All of them have their strengths and weaknesses and they use different approaches. TeX4ht is included in TeXLive and MiKTeX unlike other two and from the point of view of theoretical CS is a «correct» way to do conversion (not surprisingly it was written by a (now deceased) member of the CS department at Ohio State). If you have just a few pages to convert, probably the right approach for you would be to chose any of the three and then do some manual editing. Now you have to be careful. For example Hevea will try to use HTML tags for things like square root while TeX4ht will use bitmap images for any math expressions. Since pure HTML has a poor support for mathematics the first approach can quickly get into trouble but when it works the output is really beautiful.
As for diagrams and pictures, all of the above programs to my knowledge rely on ImageMagic to do image conversion. Hevea has to be run multiple times (it is actually bunch of scripts) and the proper way to use it is by writing a Makefile (Unix again). I would actually convert images and diagrams manually using GraphicMagic which is IMHO far more stable and better batch image processor than ImageMagic.
RtextDoc has a built in Latex to Html converter
You might want to consider using DocOnce as primary format instead of LaTeX:
DocOnce is a modestly tagged (Markdown-like) markup language targeting scientific reports, software documentation, books, blog posts, and slides involving much math and code in the text. From DocOnce source you can generate LaTeX, Sphinx, HTML, IPython notebooks, Markdown, MediaWiki, and other formats. This means that you from a single source can get the most up-to-date publishing technologies for paper, tablets, and phones.
I was trying to do the same thing, and found this post. But. even though my book doesn’t have fancy mathematical formulas, I thought what I developed could be of use to future generation of Latex book writers who are frustrated by HTML conversion.
I really needed to convert my Latex book to HTML. Having had experience with writing my own plain-text to HTML converters for some personal project software, and server side programming, I wrote this PHP script, that solves the problem for simple Latex documents using Regular Expressions.
By simple, I mean, only converts the following items:
The last item (7) requires additional attention. You must replicate your image folder elsewhere, and tweak the PHP script to point to it. In this example it is set to http://localhost/ it is assumed that you have some base image folder for entire manuscript. Make sure it exists somewhere and specify it in this part of the script.
One idea is. if possible, you can convert your mathematical formulas to images, use those images in your Latex document, and you should have no problem with the conversion using this script. Unfortunately, HTML doesn’t really support math too well, at least at this time. Good luck!
It also does some other silly clean-up tweaking, like converting
to space, just to make sure there are no HTML redundancies.
The script is surprisingly simple. All glory to Regular Expressions.