Как вывести латексный код в div из текстовой области?
В Физика ЮВ а также Математика SE, всякий раз, когда кто-то пишет текст вроде
some text $equation1$ some text $equation2$ ...
в текстовой области текст отображается в поле ниже, отформатированном с помощью LaTeX.
Кто-нибудь знает, как это можно сделать? Я имею в виду, какой инструмент используется и как отобразить уравнение в элементе div и как избежать его отображения в текстовой области.
Решение
Они используют MathJax. Вы можете прочитать о том, как использовать его на вашем сайте, читая Вот и примеры синтаксиса Вот.
Пример использования:
<!DOCTYPE html>
<html>
<head>
<title>MathJax TeX Test Page</title>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}});
</script>
<script type="text/javascript"src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>
</head>
<body>
When $a \ne 0$, there are two solutions to \(ax^2 + bx + c = 0\) and they are
$$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$
</body>
</html>
Отображается как:
РЕДАКТИРОВАТЬ: Если вы не хотите отображать математические уравнения в одной текстовой области, вы можете пометить элемент определенным классом, например: math-editor и настройте MathJax как:
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
tex2jax: {
inlineMath: [['$','$'], ['\\(','\\)']],
ignoreClass: "math-editor" // put this here
}
});
</script>
это ignoreClass свойство объясняется Вот. Или вы могли бы использовать processClass свойство помечать что должен быть обработанным.
Кроме того, вы можете связать текстовое поле с функцией jQuery для захвата события, когда пользователь вводит что-то внутри текстового поля, чтобы скопировать текст и вставить в другой div, который может быть визуализирован MathJax.
EDIT2: другой демонстрация показывая, как обновить div с обработанным кодом после ввода простого текста в текстовой области.
Другие решения
Других решений пока нет …