Wenn du in Vue 3 mathematische Formeln mit LaTeX darstellen möchtest, ist MathJax die ideale Lösung. Mit diesem Ansatz kannst du sowohl statische als auch dynamische Inhalte rendern.

1. MathJax einbinden

Zuerst musst du MathJax in dein Projekt einbinden, zum Beispiel über ein CDN in der HTML-Datei:

<script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>

2. Vue 3 App mit MathJax

Die folgende Vue 3 Komponente zeigt, wie du MathJax in einer Vue-App verwenden kannst. Dabei wird jede Formel gerendert, sobald die Komponente gemountet oder aktualisiert wird:

<div id="app">
  <p>Hier ist eine Formel: \(E = mc^2\)</p>
</div>

<script type="module">

  import { createApp, ref, onMounted, onUpdated } from "https://unpkg.com/vue@3/dist/vue.esm-browser.js";

  const app = createApp({
    setup() {

      const renderMath = () => {

        if (window.MathJax) {

          window.MathJax.typesetPromise();

        }

      };

      onMounted(renderMath);
      onUpdated(renderMath);

      return { wsg_1080 }

    }
  });

  app.mount('#app');

</script>

3. Erklärung

• onMounted(renderMath) sorgt dafür, dass MathJax die Formeln beim ersten Rendern verarbeitet.
• onUpdated(renderMath) stellt sicher, dass auch dynamisch geänderte Inhalte korrekt gerendert werden.
• window.MathJax.typesetPromise() rendert alle LaTeX-Formeln auf der Seite.

Mit dieser Methode kannst du LaTeX-Formeln überall in deiner Vue-App verwenden, egal ob statisch oder dynamisch.

Hat man mit Javascript ein Proxy Objekt, kann man mit Array.isArray() prüfen ob der Wert des Proxy Objektes ein Array ist.

Mit folgender JavaScript Funktion kann ein CSV Download aus einem Array initiiert werden.

function downloadCSV(data, filename) {

	const csvContent = "data:text/csv;charset=utf-8," + data.map(row => row.join(",")).join("\n");
	const encodedUri = encodeURI(csvContent);
	const link = document.createElement("a");

	link.setAttribute("href", encodedUri);
	link.setAttribute("download", filename);

	document.body.appendChild(link);

	link.click();

	document.body.removeChild(link);

}

Das ganze wird dann wie folgt aufgerufen:

downloadCSV(csvData, fileName);

Liegt über einem focusierbaren Element z.B. ein Layer dann sind diese Elemente weiterhin mit Tastatur auswählbar. Folgendes Script löst das Problem durch temporäres setzen eines negativen tabindex.

Beispiel: https://daschmi.de/static/ds_focuser/

const ds_focuser_open_layer = (el_layer) => {
  
  document.querySelectorAll('button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"]):not([disabled]), details:not([disabled]), summary:not(:disabled)').forEach((el) => {

    el.setAttribute('ds_focuser_tabindex', el.getAttribute('tabindex'));
    el.setAttribute('tabindex', '-1');

  });

  el_layer.querySelectorAll('*[ds_focuser_tabindex]').forEach((el) => {
    
    el.setAttribute('tabindex', el.getAttribute('ds_focuser_tabindex'));
    el.removeAttribute('ds_focuser_tabindex');

  });

};

const ds_focuser_close_layer = () => {

  document.querySelectorAll('*[ds_focuser_tabindex]').forEach((el) => {
    
    el.setAttribute('tabindex', el.getAttribute('ds_focuser_tabindex'));
    el.removeAttribute('ds_focuser_tabindex');

  });

};

window.addEventListener("load", () => {

  window.addEventListener("resize", () => {

    for (const row of document.querySelectorAll('.equal_child_hight')) {

      let arHeight = {};

      for (const col of row.children) {

        for (const el_index in col.children) {

          if (typeof col.children[el_index] === 'object') {

            if (arHeight[el_index] === undefined || arHeight[el_index] < col.children[el_index].getBoundingClientRect().height) arHeight[el_index] = col.children[el_index].getBoundingClientRect().height;

          }

        }

      }

      for (const col of row.children) {
         
        for (const el_index in col.children) {

          if (arHeight[el_index]) col.children[el_index].style.height = arHeight[el_index] + 'px';

        }

      }

    }

  });

});