Информационные технологии. Теория и практика

Интернет-технологии для бизнеса, учебы, жизни. Создание, управление, хранение, передача и обработка информации. Интернет-новости, обзоры. Психология интернета. Работа и заработок в сети.

Математические формулы MathJax

На любом сайте может понадобиться опубликовать математическую формулу. Наш сайт не исключение, тем более тематика сайта требует публиковать и математические статьи. Расскажем подробно, как мы это будем делать, чтобы наши читатели смогли реализовать такую же публикацию и на своих сайтах или блогах. Для отрисовки формул будет использовать математическую библиотеку MathJax. Для начала надо подключить ее на свой сайт, разместив на странице с формулой код:


Затем понадобится разместить сам код формулы, набранной на языке TeX. Результат отрисовки нескольких примеров можно видеть ниже. Если вы собираетесь работать со страницей и формулами, то, возможно, вам понадобится увеличение формул. Можно настроить разные варианты: увеличить формулу при наведении курсора (hover): по клику (Click); по двойному клику (Double Click). А также можно выполнить масштабирование всех формул (Scale all Math). Кроме того, можно выбрать разные варианты отрисовки формул для обеспечения наилучшего качества: Html-Css; MathML и в виде векторной графики SVG ()наилучшее качество графики формул). А чтобы попробовать все настройки просто поднесите курсор к формуле и нажмите правую кнопку мыши. Во всплывшем меню, выбирайте настройки. Внизу есть картинка - пример такого меню для настроек.

Уравнения Лоренца

\[\begin{matrix} \dot{x} & = & \sigma(y-x) \\ \dot{y} & = & \rho x - y - xz \\ \dot{z} & = & -\beta z + xy \end{matrix} \]

Неравенство Коши-Буняковского

\[ \left( \sum_{k=1}^n a_k b_k \right)^2 \leq \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right) \]

Еще пример формулы

\[\mathbf{V}_1 \times \mathbf{V}_2 = \begin{vmatrix} \mathbf{i} & \mathbf{j} & \mathbf{k} \\ \frac{\partial X}{\partial u} & \frac{\partial Y}{\partial u} & 0 \\ \frac{\partial X}{\partial v} & \frac{\partial Y}{\partial v} & 0 \end{vmatrix} \]

Ну и в завершение, еще экзотичнее:

\[ \frac{1}{(\sqrt{\phi \sqrt{5}}-\phi) e^{\frac25 \pi}} = 1+\frac{e^{-2\pi}} {1+\frac{e^{-4\pi}} {1+\frac{e^{-6\pi}} {1+\frac{e^{-8\pi}} {1+\ldots} } } } \]

Для того, чтобы понять что за код мы вставили в страницу, поднесите курсор к интересующей вас формуле и нажмите правую кнопку мышки, а затем выберите из появившегося меню пункт "Tex Commands". Пример такого меню можно увидеть на рисунке слева. После этого, во всплывающем окне вы увидите код, который и был вставлен на страницу. Для первой, из приведенных здесь формул, он выглядит так как приведено ниже. Это Tex-код формулы. Математики хорошо знают этот язык для записи формул. Если же вы не математик, то можно воспользоваться, например, визуальным редактором формул.

\begin{matrix}
 \dot{x} & = & \sigma(y-x) \\
 \dot{y} & = & \rho x - y - xz \\
 \dot{z} & = & -\beta z + xy
 \end{matrix}
Пользуясь тем же приемом, можно получить код формулы в формате MathML, правда выглядит он уже устрашающе.

 
 
 
 
 
 x
 ˙
 
 
 
 
 =
 
 
 σ
 (
 y
 
 x
 )
 
 
 
 
 
 
 y
 ˙
 
 
 
 
 =
 
 
 ρ
 x
 
 y
 
 x
 z
 
 
 
 
 
 
 z
 ˙
 
 
 
 
 =
 
 
 
 β
 z
 +
 x
 y
 
 
 

Ну а для тех, кого не испугал приведенный код, покажем еще один код, который создает уже векторное (масштабируемое) изображение формул в формате SVG. Он был извлечен из кода страницы с использованием инспектора кода браузера Опера.





















































Arxweb.Net

Комментарии: 1 2 3 »

    аватар отсутствует
    PetrovBiznesNup
    23.02.2018 - 05:05
    Like | 0
    №9
    Друзья!

    1. Подбор нужной вакансии с достойной з/п. Сбор сведений о требованиях к документам соискателя.
    2. Заказываем изготовление пакета необходимых документов:

    http://дипломы.пермь.рус - Купить справку в Перми #дипломы.пермь.рус
    3. Приходим на собеседование, естественно впечатляем работодателя своими регалиями в виде пакета доков(дипломы, свидетельства,удостоверения и т.п.)
    - разумеется получаем заветную должность и радуемся жизни.

    Профит!
    Оформляем документы тут - INFO@diplom59rus.RU (не считать рекламой)
    аватар отсутствует
    CharlesBypom
    27.01.2018 - 02:11
    Like | 0
    №8
    HI - this good site? - http://ria.com
    аватар отсутствует
    JosephRox
    26.01.2018 - 02:44
    Like | 0
    №7
    I am sorry for off-topic, I am considering about creating an enlightening website for students. May possibly commence with submitting interesting information such as"Because metal was scarce, the Oscars given out during World War II were made of wood."Please let me know if you know where I can find some related info like here

    http://www.pegasocentrostudi.it/inexpensive-papers-writing-service/

Ваш комментарий: