Добавление математических выражений в markdown файлы в Gridsome

29-10-2019

Введение

Gridsome предоставляет прекрасную возможность использования математических выражений в markdown файлах, используя плагин gridsome-remark-katex. Однако, к сожалению, на официальном сайте Gridsome и сайте этого плагина отсутствует информация о том, как всё-таки правильно настроить его для полноценной работы в связке с другими плагинами. Если следовать описанию, представленному тут, то Вы не сможете запустить даже свой сайт после установки плагина (и это не шутка). На момент написания статьи в интернете присутствовало много информации, связанной с описанием проблем, с которыми сталкивались разработчики при использовании katex в связке с Gridsome. К сожалению с ними пришлось столкнуться и мне, но желание получить возможность использовать математические формулы на сайте превозмогло все "трудности".
Поэтому спешу поделиться простыми советами как получить желаемое ...

Установка и настройка

Для коррекной работы с Katex нам понадобяться следующие плагины:

На момент написания статьи package.json содержал:

  "dependencies": {
    "@fullhuman/postcss-purgecss": "^1.3.0",
    "@gridsome/source-filesystem": "^0.6.2",
    "@gridsome/transformer-remark": "^0.3.4",
    "@gridsome/vue-remark": "^0.1.7",
    "gridsome": "^0.7.9",
    "gridsome-plugin-remark-shiki": "^0.3.0",
    "lodash.pick": "^4.4.0",
    "remark-html-katex": "^2.0.0",
    "remark-math": "^2.0.0"
  }

После установки этих пакетов (например через npm install ...), нам необходимо будет сделать несколько дополнительный настроек:

  1. В файле gridsome.config.js необходимо добавить строки (они позволят использовать плагины на всех страницах сайта):
  transformers: {
    remark: {
      plugins: [
        ['gridsome-plugin-remark-shiki', { theme: 'Material-Theme-Palenight', skipInline: true }],
        ['remark-math'],
        ['remark-html-katex']
      ],
  1. В файлах, содержащих шаблон для Ваших markdown файлов нужно добавить стили, например:
<script>
import 'katex/dist/katex.min.css';
export default {
  
  ...

  }
}
</script>

Заключение

Теперь Вы можете использовать математические формулы на своих сайтах, что-то вроде:

Гамма функция удовлетворяющая Γ(n)=(n1)!nN\Gamma(n) = (n-1)!\quad\forall n\in\mathbb N ...

Γ(z)=0tz1etdt.\Gamma(z) = \int_0^\infty t^{z-1}e^{-t}dt\,.

и : p=1qp={1\over q} .

или

x1,2=b±b24ac2a.x_{1,2} = {-b\pm\sqrt{b^2 - 4ac} \over 2a}.

а еще лучше: A=Ax2+Ay2+Az2.|\vec{A}|=\sqrt{A_x^2 + A_y^2 + A_z^2}.

или: Qплавления>0Q_\text{плавления}>0.

или:

Tμν=(ε0000ε/30000ε/30000ε/3),T^{\mu\nu}=\begin{pmatrix} \varepsilon&0&0&0\\ 0&\varepsilon/3&0&0\\ 0&0&\varepsilon/3&0\\ 0&0&0&\varepsilon/3 \end{pmatrix},

интеграл:

Pω=nω2ω1+R1v211dx(xv)xv,P_\omega={n_\omega\over 2}\hbar\omega\,{1+R\over 1-v^2}\int\limits_{-1}^{1}dx\,(x-v)|x-v|,

а лучше запишите и повторите уравнения Максвела :-) :

уравнение
B=0\nabla \cdot \vec{\mathbf{B}} = 0
×E+1cBt=0\nabla \times \vec{\mathbf{E}}\, +\, \frac1c\, \frac{\partial\vec{\mathbf{B}}}{\partial t} = \vec{\mathbf{0}}
×B1cEt=4πcjE=4πρ\nabla \times \vec{\mathbf{B}} -\, \frac1c\, \frac{\partial\vec{\mathbf{E}}}{\partial t} = \frac{4\pi}{c}\vec{\mathbf{j}} \nabla \cdot \vec{\mathbf{E}} = 4 \pi \rho

но я, пожалуй, начну с азов :-) :

(a+b)2=a2+2ab+b2(a+b)^2 = a^2 + 2ab + b^2