Wzory matematyczne na stronie [MathJax/LaTeX]

Równania MathJax

Równania Maxwella

Czasem pojawia się potrzeba zastosowania wzorów matematycznych na stronie, i nie chodzi tutaj o trywialne E=mc2. Chodzi o coś bardziej rozbudowanego typu:

\[ E = \frac{m_0}{\sqrt{1-\frac{v^2}{c^2}}} \]

Jak to zrobić? Z pomocą idzie LaTeX, a dokładniej biblioteka w JavaScript umożliwiająca wyświetlanie tego typu treści na stronie czyli MathJax. Co trzeba zrobić żeby cieszyć się wzorami na swoim WordPressie, Drupalu czy jakiejkolwiek witrynie? Pierwsze rozwiązanie, nie zawsze dobre to po prostu poszukać gotowej wtyczki i po prostu ją zainstalować. Niestety, nie zawsze to działa – albo przez złośliwość rzeczy martwych, albo przez niedostosowanie starej wersji wtyczki do nowej wersji CMSu lub po prostu przez niekompatybilność ze skórką jaką mamy. Dlatego o wiele lepsza jest instalacja ręczna (czyli po prostu najzwyklejsza, normalna instalacja)

Pierwsze co trzeba zrobić, to wejść na oficjalną stronę projektu: http://www.mathjax.org/

Tam znajdziemy w górnej części menu zakładkę „Resources”, a po najechaniu na nią kursorem zobaczymy rozwijane menu z opcją „Get MathJax”. Tak to tam. W gąszczu różnego rodzaju tekstu znajdziemy linijkę zaczynającą się od słów „Current Version” gdzie będzie znajdował się link do naszej paczki z niezbędnymi plikami.

Gdy już pobierzemy i rozpakujemy na serwerze, np. w katalogu głównym założymy katalog „MathJax” gdzie zostaną skopiowane pliki, zostaje ostatni etap – dodanie do sekcji <head> ścieżki do pliku z MathJax.js czyli:

<script type="text/javascript" src="MathJax/MathJax.js?config=default"></script>
Oczywista uwaga: Niby każdy wie, ale zwykle można to przeoczyć – w ścieżce do pliku WAŻNA jest wielkość znaków

To w sumie byłoby wszystko, ale teraz jak zobaczyć wzór na stronie? Musimy użyć poleceń LaTeXa to „zbudowania wzoru”, np wzór jaki był widoczny na początku artykułu, w kodzie strony wygląda tak:

\[ E = \frac{m_0}{\sqrt{1-\frac{v^2}{c^2}}} \]

Jak widać wszystko co jest pomiędzy nawiasami kwadratowymi \[ oraz \] będzie interpretowane jako wzór. Jeżeli chcemy jednak, aby wzór był w tej samej linijce co tekst, np. \( \int e^x dx \), musimy nasz wzór napisać między nawiasami okrągłymi, tzn. \( oraz \)

Wersja dla leniwych

Zamiast ściągać wszystko do siebie na serwer, można skorzystać z bibliotek MathJax na zewnętrznym serwerze. Rozwiązanie dobre gdy nie chcemy generować za dużego transferu (limity na hostingu), ale trzeba wtedy pamiętać że jak serwer zewnętrzny przestanie działać to wzory też. Żeby to zrobić, w sekcji <head> musimy dodać linijkę:

<script type="text/javascript"  src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>

I to w sumie wszystko. Jak wiadomo jest to ustawienie najprostsze czyli domyślne. Resztę opcji można znaleźć w pliku config/default.js oraz w oficjalnej dokumentacji na stronie: http://docs.mathjax.org/en/latest/index.html

 

 

Tags: , ,

  1. Lisek’s avatar

    Przydatne, chociaż ja osobiście użyłem „Wersji dla leniwych” ;) ale przynajmniej wiem jak to działa od środka jakbym chciał zrobić instalacje niezależną.
    Pozdro!

    Odpowiedz

  2. bury beny’s avatar

    Dobry artykuł. Może by tak jeszcze zrobić jakąś szybką ściągawkę najczęściej używanych/najbardziej potrzebnych komend LateXa ?

    Odpowiedz

Reply

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *