I. Introduction
Do I get an educational project including the creation of exam questions, assignments … clients require beautiful and detailed problem creation with formulas displayed like handwritten (obviously ckeditor, tinyMCE also supports this, but my project doesn’t have to import the library this big and it’s not as complete as this katex library).
II. Research
- In this article I will use vue-katex to render katex
- Setup vuejs. Install
vue-katexandkatex:npm install vue-katex katex–save - Source code setup
1 2 3 4 5 6 7 8 9 10 | import Vue from 'vue'; import VueKatex from 'vue-katex'; import 'katex/dist/katex.min.css'; Vue.use(VueKatex, { globalOptions: { //... Define globally applied KaTeX options here } }) |
To display katex, just like this
1 2 | <div v-katex="{ expression: expression, options: { throwOnError: false }}"></div> |
- All setup is complete, now let’s practice
1. Chemical formula
1 2 | <span v-katex="{ expression: 'H_2 + O_2 \longrightarrow HOHO', options: { throwOnError: false }}"></span> |
Results 
A little more advanced series of chemical equations see
1 2 | <span v-katex="{ expression: 'Al_2O_3 \xrightarrow{(1)} Al \xrightarrow{(2)} AlCl_3 \xrightarrow{(3)} NaCl \xrightarrow{(4)} NaOH \xrightarrow{(5)} Cu(OH)_2', options: { throwOnError: false }}"></span> |
2. Mathematical formula
Equations
1 2 | <span v-katex="{ expression: '\begin{cases} 10x + 3y = 2' + '\' + '\ 3x + 13 y = 4\end{cases}', options: { throwOnError: false }}"></span> |
Results 
Integral
1 2 | <span v-katex="{ expression: '\[ \int_a^b x^2\;\mathrm{d}x= \tfrac{1}{3} x^3 \Big|_a^b \]', options: { throwOnError: false }}"></span> |
Results 