Formeln von MathJax auf KaTeX umgestellt

This commit is contained in:
Matthias Grief
2024-12-23 18:38:26 +01:00
parent 438fd9cb25
commit ea8b48b97b
5 changed files with 136 additions and 44 deletions

View File

@@ -2,7 +2,7 @@ Brüche werden verwendet, um Anteile an einem Ganzen darzustellen. So kann es vo
<br><br> Ein Bruch setzt sich aus einem Zähler, einem Bruchstrich und einem Nenner zusammen. Der Zähler wird über dem Bruchstrich geschrieben, der Nenner darunter.
<br><br>
$$
\begin{array}{c@{\quad}l}
\begin{array}{cl}
3 & \text{Zahler} \\
- & \text{Bruchstrich} \\
7 & \text{Nenner} \\

View File

@@ -1,5 +1,5 @@
$$
\begin{array}{r@{}r@{}r@{}r}
\begin{array}{rrrr}
& 8 & 4 & 0 & : & 4 & = & 2&1&0 \\
\hline
- & 8 & & \\ % Erste Subtraktion

View File

@@ -2,7 +2,7 @@ Kommen wir nun zur schriftlichen Multiplikation: Das Ziel dieses Artikels ist es
<br><br>
$$
\begin{array}{r@{}r@{}r@{}r}
\begin{array}{rrrr}
& 1 & 2 & \times & 3 & 2 & \\ \hline % mal 32
& & & 3 & 6 \\ % 12 * 2 = 36
+ &&&& 2 & 4 \\ \hline % 12 * 3 mit Zehnerstelle = 240
@@ -23,7 +23,7 @@ Das Ergebnis ist somit 12 · 32 = 384.<br>
<br> <br> Ein weiteres Beispiel <br>
$$
\begin{array}{r@{}r@{}r@{}r@{}r@{}r}
\begin{array}{rrrrr}
2 & 8 & 4 & 6 & 8 & \times & 1 & 6 \\ \hline % mal 16
&& \textcolor{red}{2} & \textcolor{red}{8} & \textcolor{red}{4} & \textcolor{red}{6} & \textcolor{red}{8} \\ % 28468 * 6 (Einerstelle)
+ && \textcolor{green}{1} & \textcolor{green}{7} & \textcolor{green}{0} & \textcolor{green}{8} & \textcolor{green}{0} & \textcolor{green}{8} \\ \hline % 28468 * 10 (Zehnerstelle)

View File

@@ -30,8 +30,29 @@ if (!isset($topicData)) {
<link href="assets/css/topic.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script src="https://cdn.tailwindcss.com"></script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
<!--<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>-->
<script src="assets/js/sidebar.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.18/dist/katex.min.css" integrity="sha384-veTAhWILPOotXm+kbR5uY7dRamYLJf58I7P+hJhjeuc7hsMAkJHTsPahAl0hBST0" crossorigin="anonymous">
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.18/dist/katex.min.js" integrity="sha384-v6mkHYHfY/4BWq54f7lQAdtIsoZZIByznQ3ZqN38OL4KCsrxo31SLlPiak7cj/Mg" crossorigin="anonymous"></script>
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.18/dist/contrib/auto-render.min.js" integrity="sha384-hCXGrW6PitJEwbkoStFjeJxv+fSOOQKOPbJxSfM6G5sWZjAyWhXiTIIAmQqnlLlh" crossorigin="anonymous" onload="renderMathInElement(document.body);"></script>
<script>
document.addEventListener("DOMContentLoaded", function() {
renderMathInElement(document.body, {
// customised options
// • auto-render specific keys, e.g.:
delimiters: [
{left: '$$', right: '$$', display: true},
{left: '$', right: '$', display: false},
{left: '\\(', right: '\\)', display: false},
{left: '\\[', right: '\\]', display: true}
],
// • rendering keys, e.g.:
throwOnError : false
});
});
</script>
</head>

View File

@@ -8,12 +8,88 @@ require_once("classes/TopicData.php");
$allSubjects = SubjectData::getAll();
$editingTopic = null;
$defaultValues = array();
$defaultValues['displayName'] = "";
$defaultValues['id'] = "";
$defaultValues['subjectId'] = "";
$defaultValues['description'] = "";
$defaultValues['icon'] = "";
$defaultValues['relatedTopics'] = "";
$defaultValues['article'] = "";
$errors = array();
if (isset($_GET['subjectId']) && isset($_GET['topicId'])) {
if (isset($allSubjects[$_GET['subjectId']]->getTopics()[$_GET['topicId']])) {
$editingTopic = $allSubjects[$_GET['subjectId']]->getTopics()[$_GET['topicId']];
$defaultValues['displayName'] = $editingTopic->getDisplayName();
$defaultValues['id'] = $editingTopic->getId();
$defaultValues['subjectId'] = $editingTopic->getSubjectId();
$defaultValues['description'] = $editingTopic->getDescription();
$defaultValues['icon'] = $editingTopic->getIcon();
$defaultValues['relatedTopics'] = implode(", ", $editingTopic->getRelatedTopics());
$defaultValues['article'] = str_replace("$$", "<br>$$<br>", $editingTopic->getFinishedArticle());
}
}
if($_SERVER['REQUEST_METHOD'] == 'POST') {
foreach ($defaultValues as $key => $value) {
$defaultValues[$key] = $_POST[$key];
}
if(!isset($_POST['displayName']) || trim($_POST['displayName']) == "") {
$errors["displayName"] = "Bitte geben Sie einen Namen an.";
}
if(!isset($_POST['id']) || trim($_POST['id']) == "") {
$errors["id"] = "Bitte geben Sie eine ID an.";
}
if(!isset($_POST['subjectId']) || trim($_POST['subjectId']) == "") {
$errors["subjectId"] = "Bitte geben Sie ein Fach an.";
}
if(!isset($_POST['description']) || trim($_POST['description']) == "") {
$errors["description"] = "Bitte geben Sie eine Beschreibung an.";
}
if(!isset($_POST['icon']) || trim($_POST['icon']) == "") {
$errors["icon"] = "Bitte geben Sie ein Icon an.";
}
if(!isset($_POST['article']) || trim($_POST['article']) == "") {
$errors["article"] = "Bitte geben Sie einen Erklärtext an.";
}
if(empty($errors)) {
$newTopic = false;
if(isset($allSubjects[$_POST['subjectId']]->getTopics()[$_POST['id']])) {
$newTopic = $allSubjects[$_POST['subjectId']]->getTopics()[$_POST['id']];
$newTopic->setDisplayName($_POST['displayName']);
$newTopic->setSubjectId($_POST['subjectId']);
$newTopic->setDescription($_POST['description']);
$newTopic->setIcon($_POST['icon']);
$relatedTopics = array();
foreach (explode(",", $_POST['relatedTopics']) as $relatedTopic) {
$relatedTopics[] = trim($relatedTopic);
}
$newTopic->setRelatedTopics($relatedTopics);
$newTopic->setArticle($_POST['article']);
} else {
$newTopic = TopicData::createNew($_POST['id'], $_POST['subjectId'], $_POST['displayName'], $_POST['icon'], $_POST['description'], $_POST['relatedTopics'], $_POST['article']);
}
if(!$newTopic) {
$errors["error"] = "Fehler beim Speichern des Themas.";
} else {
$newTopic->save();
header("Location: " . "topic.php?subject=" . $newTopic->getSubjectId() . "&topic=" . $newTopic->getId());
}
}
}
?>
<!DOCTYPE html>
@@ -31,39 +107,43 @@ if (isset($_GET['subjectId']) && isset($_GET['topicId'])) {
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/quill@2.0.3/dist/quill.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.18/dist/katex.min.css" integrity="sha384-veTAhWILPOotXm+kbR5uY7dRamYLJf58I7P+hJhjeuc7hsMAkJHTsPahAl0hBST0" crossorigin="anonymous">
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.18/dist/katex.min.js" integrity="sha384-v6mkHYHfY/4BWq54f7lQAdtIsoZZIByznQ3ZqN38OL4KCsrxo31SLlPiak7cj/Mg" crossorigin="anonymous"></script>
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.18/dist/contrib/auto-render.min.js" integrity="sha384-hCXGrW6PitJEwbkoStFjeJxv+fSOOQKOPbJxSfM6G5sWZjAyWhXiTIIAmQqnlLlh" crossorigin="anonymous" onload="renderMathInElement(document.body);"></script>
</head>
<body class="min-h-screen bg-gray-50">
<form id="topicForm" class="space-y-8">
<form id="topicForm" method="post" class="space-y-8">
<div class="grid grid-cols-1 xl:grid-cols-2 gap-8">
<!-- Left column - Topic details -->
<div class="space-y-6">
<div>
<label for="topicNameSelect" class="block text-sm font-medium text-gray-700">Themenname</label>
<input id="topicNameSelect" type="text" name="displayName"
class="mt-1 block w-full rounded-lg border-gray-300 shadow-sm" required value="<?php
if (isset($editingTopic)) {
echo $editingTopic->getDisplayName();
}
?>">
class="mt-1 block w-full rounded-lg border-gray-300 shadow-sm" required value="<?php echo $defaultValues['displayName']; ?>">
</div>
<div>
<label for="topicIdSelect" class="block text-sm font-medium text-gray-700">ID</label>
<input id="topicIdSelect" type="text" name="id"
class="mt-1 block w-full rounded-lg border-gray-300 shadow-sm" required value="<?php echo $defaultValues['id']; ?>">
</div>
<div>
<label for="topicSubjectSelect" class="block text-sm font-medium text-gray-700">Fach</label>
<select id="topicSubjectSelect" name="subject"
<select id="topicSubjectSelect" name="subjectId"
class="mt-1 block w-full rounded-lg border-gray-300 shadow-sm" required>
<option value="">Fach auswählen...</option>
<?php
foreach ($allSubjects as $subject) {
$selected = "";
if (isset($editingTopic)) {
if ($editingTopic->getSubjectId() === $subject->getId()) {
$selected = "selected";
}
if ($defaultValues['subjectId'] === $subject->getId()) {
$selected = "selected";
}
echo "<option $selected value='" . $subject->getID() . "'>" . $subject->getDisplayName() . "</option>";
echo "<option $selected value='" . $subject->getId() . "'>" . $subject->getDisplayName() . "</option>";
}
?>
</select>
@@ -73,32 +153,20 @@ if (isset($_GET['subjectId']) && isset($_GET['topicId'])) {
<label for="topicDescriptionSelect"
class="block text-sm font-medium text-gray-700">Kurzbeschreibung</label>
<textarea id="topicDescriptionSelect" name="description" rows="5"
class="mt-1 block w-full rounded-lg border-gray-300 shadow-sm" required><?php
if (isset($editingTopic)) {
echo $editingTopic->getDescription();
}
?></textarea>
class="mt-1 block w-full rounded-lg border-gray-300 shadow-sm" required><?php echo $defaultValues['description']; ?></textarea>
</div>
<div>
<label for="iconSelect" class="block text-sm font-medium text-gray-700">Icon</label>
<input class="mt-1 block w-full rounded-lg border-gray-300 shadow-sm" type="text" name="icon"
id="iconSelect" value="<?php
if (isset($editingTopic)) {
echo $editingTopic->getIcon();
}
?>">
id="iconSelect" value="<?php echo $defaultValues['icon']; ?>">
</div>
<div>
<label for="relatedTopicSelect" class="block text-sm font-medium text-gray-700">Verwandte Themen
als IDs und kommagetrennt</label>
<input class="mt-1 block w-full rounded-lg border-gray-300 shadow-sm" type="text"
name="related-topics" id="relatedTopicSelect" value="<?php
if (isset($editingTopic)) {
echo implode(", ", $editingTopic->getRelatedTopics());
}
?>">
name="relatedTopics" id="relatedTopicSelect" value="<?php echo $defaultValues['relatedTopics']; ?>">
</div>
</div>
@@ -120,24 +188,16 @@ if (isset($_GET['subjectId']) && isset($_GET['topicId'])) {
</div>
<div id="quillEditor" style="height: 400px;" class="bg-white border rounded-lg">
<?php
if (isset($editingTopic)) {
$article = $editingTopic->getFinishedArticle();
$article = str_replace("$$", "<br>$$<br>", $article);
echo $article;
}
?>
<?php echo $defaultValues['article']; ?>
</div>
</div>
</div>
</div>
<!--
<div class="border rounded-lg p-8 mt-8 bg-gray-50">
<h4 class="text-lg font-medium text-gray-700 mb-4">Vorschau</h4>
<div id="contentPreview" class="prose prose-lg max-w-none bg-white p-6 rounded-lg shadow-sm"></div>
</div>
-->
<div class="flex justify-end gap-4">
<button type="button" onclick="closeModal()"
@@ -154,6 +214,17 @@ if (isset($_GET['subjectId']) && isset($_GET['topicId'])) {
</form>
<script>
const Inline = Quill.import('blots/inline');
const Block = Quill.import('blots/block');
const Embed = Quill.import('blots/embed');
class FormulaBlot extends Embed {
static blotName = 'formula';
static tagName = 'math';
}
//Quill.register(FormulaBlot);
const quill = new Quill('#quillEditor', {
modules: {
toolbar: [
@@ -161,15 +232,15 @@ if (isset($_GET['subjectId']) && isset($_GET['topicId'])) {
['bold', 'italic', 'underline', 'strike'],
[{'script': 'super'}, {'script': 'sub'}],
[{'list': 'ordered'}, {'list': 'bullet'}],
['link', 'image'],
['link', 'image', 'formula'],
]
},
theme: 'snow'
});
quill.on('text-change', (delta, oldDelta, source) => {
const html = quill.getSemanticHTML();
//document.getElementById('contentPreview').innerHTML = html;
const html = quill.getSemanticHTML().replace(/&nbsp;/g, " ");
document.getElementById('contentPreview').innerHTML = html;
document.getElementById('article-upload-field').value = html;
});