sobota 4. února 2017

VueJS 2: píšeme komponentu - zobrazení matematického výrazu (Katex/Latex)

Pomocí komponent si můžeme definovat vlastní HTML tagy a použít je na webové stránce. Na tomto blogu již vyšlo: VueJS 2: komponenty, VueJS 2: píšeme komponentu - zobrazení věku, VueJS 2: píšeme komponentu - schématická značka (SVG grafika)

Katex

Pro psaní matematických symbolů, rovnic, ... byl vyvinut nástroj Latex. Jeho modifikace od Khan Academy je Katex.

Zadání

Vytvoříme komponentu, která zobrazí matematický výraz (vzorec, rovnici, ...) pomocí nástroje Katex. 

Řešení

Poznámka: jde o ukázku, nebude se provádět kontrola vstupních údajů (hodnoty atributů).

Komponenta bude mít název katex a bude obsahovat jeden atribut expr (expression). Zobrazí zadaný matematický výraz v konvencích Katexu/Latexu do webové stránky.

Deklarace komponenty

Vue.component("katex", {
  replace: true,
  props: {
    expr: {
      type: String,
      default: ""
    }
  },
  data: function(){
  },
  computed: {
    _expr: function(){
      try {
        return katex.renderToString(this.expr, {throwOnError: false});  
      } catch (err) {
        return "" 
      }
    }
  },
  template: '<span v-html="_expr"></span>'
});

Komponenta obsahuje jednu vlastnost a to expr, do které vložíme požadovaný matematický výraz. V části template se zobrazí obsah jako HTML kód vygenerovaný pomocí katex.renderToString(), který se generuje v části computed.

Použití v HTML

Komponentu lze použít např. takhle:
<p>
 expression directly: <span v-katex="{expr: 'x_{1}=\\frac{1}{2} \\cdot a^2'}"></span>
</p>

Výsledek

Jak vypadá výsledek se můžete podívat tady (pokud chcete provést úpravy, nejprve prosím klepněte vpravo nahoře na fork, dostanete tak vlastní kopii).

Žádné komentáře:

Okomentovat