Cowboy: Die Seite wurde neu angelegt: „{{Hilfe}}{{Hilfe:VisualEditor/!badge|InsertAll|Formel|Mehr}} Diese Seite beschreibt, wie '''Formelzeichen''' mit der Bearbeitungsumgebung '''VisualEditor''' in den Seitentext eingefügt oder bearbeitet werden können. Es gibt für mathematische Formelzeichen eine Funktion zur einheitlichen Darstellung durch die Verwendung von `<math>`-Tags. TOC {{Hilfe:VisualEditor/!head…“

2026-04-06T18:33:21Z

Die Seite wurde neu angelegt: „{{Hilfe}}{{Hilfe:VisualEditor/!badge|InsertAll|Formel|Mehr}} Diese Seite beschreibt, wie '''Formelzeichen''' mit der Bearbeitungsumgebung '''VisualEditor''' in den Seitentext eingefügt oder bearbeitet werden können. Es gibt für mathematische Formelzeichen eine Funktion zur einheitlichen Darstellung durch die Verwendung von <code><math></code>-Tags. __TOC__ <onlyinclude>{{Hilfe:VisualEditor/!head…“

Neue Seite

{{Hilfe}}{{Hilfe:VisualEditor/!badge|InsertAll|Formel|Mehr}}
Diese Seite beschreibt, wie '''[[Hilfe:TeX|Formelzeichen]]''' mit der Bearbeitungsumgebung '''[[Hilfe:VisualEditor|VisualEditor]]''' in den Seitentext eingefügt oder bearbeitet werden können. Es gibt für mathematische Formelzeichen eine Funktion zur einheitlichen Darstellung durch die Verwendung von <code><math></code>-[[Hilfe:Tags|Tags]].
__TOC__
<onlyinclude>{{Hilfe:VisualEditor/!headline|2|TeX – mathematische Formeln|Gesamt=5|VisualEditor/Einfügen=3}}
{{#ifeq:{{PAGENAME}}|VisualEditor/Bedienung| |<includeonly><div class="skin-invert">{{Projekt-Logo |box={{Hilfe:VisualEditor/!dropdown|InsertFew|Mehr|head=11em}}{{Hilfe:VisualEditor/!dropdown|InsertAll|Formel|head=11em}}}}</div></includeonly>}}
<span class="skin-invert-image">{{#ifeq:{{PAGENAME}}|TeX/VisualEditor|Das Bearbeitungswerkzeug bietet im Bearbeitungsmodus zu einer Seite einen Menüpunkt {{Hilfe:VisualEditor/!toolitem|InsertAll}}. In dessen Drop-Down-Bereich befindet sich ein|Aktivierung über den}} Unterpunkt <code>{{Hilfe:VisualEditor/!toolitem|Formel|name=1}}</code>, der sichtbar wird, wenn du das Menü über die Option <code>{{Hilfe:VisualEditor/!toolitem|Mehr|name=1}}</code> weiter ausklappst.</span>

Das Anklicken des Menüpunktes öffnet ein neues Dialogfenster. Alternativ kann dieses Fenster auch über die Eingabe von <span class="skin-invert">{{Taste|<math}}</span> an der Cursorposition aufgerufen werden.

{{Hilfe:VisualEditor/!headline|3|Das Dialogfenster|Gesamt=5|VisualEditor/Einfügen=4|Anker1=math-dialog}}

{| class="wikitable hintergrundfarbe-basis toptextcells"
|- class="hintergrundfarbe9"
| [[Datei:VisualEditor-logo.svg|x20px|alt=|Logo]]
|-
! Beschreibung des Dialogfensters
|-
| <div class="hintergrundfarbe-basis" style="border: 1px solid #BBBBBB; border-radius: 3px; font-size:90%; width: 440px;">
{{Hilfe/dialog|2=i|label-t={{int:math-visualeditor-mwmathdialog-title}}|label-1=[[Datei:Codex icon close.svg|12px|verweis=|alt=|Abbrechen]]|label-2=Einfügen|noframe=1}}
<div class="skin-invert" style="background:#{{Standardfarbe|hintergrund|5}}; color:#{{Standardfarbe|text|body}}; padding-top:.1em; font-weight:bold;">
{{0|0}}{{Menü-Icon|{{int:math-visualeditor-mwlatexdialog-card-formula}}|non|border=#FFFFFF|padding=2}}{{0|0}}{{Menü-Icon|{{int:math-visualeditor-mwlatexdialog-card-options}}|non|background=#EAECF0|border=#EAECF0|padding=2}}</div>
{| style="padding: .5em; width:100%;"
|-
|style="line-height: 40px; border: 1px dashed #80D080; margin: .5em; padding: .5em; background:var(--background-color-success-subtle,#F0FFE0); color:var(--color-success,#14866D); text-align:center;" title="interaktiver Vorschaubereich"| ''Vorschaubereich''
|-
| {{int:math-visualeditor-mwlatexdialog-card-formula}}
|-
|
{| style="width: 100%; border: 1px solid #BBBBBB; margin-bottom: .5em; line-height: 1em; border-collapse:collapse;"
|-
|class="hintergrundfarbe5" style="width: 25px; text-align:right;"| 1  ||rowspan="2" class="hintergrundfarbe-basis"|<div style="border: 1px dashed #80D080; margin: .5em; padding: .5em; background:var(--background-color-success-subtle,#F0FFE0); color:var(--color-success,#14866D); text-align:center;">''Eingabebereich''</div>
|-
|class="hintergrundfarbe1" style="height:40px;"|
|}
|}
----
{| style="width: 100%;"
|-
|<div style="height: 180px; width:210px; overflow: auto;">
<div class="skin-invert" style="margin-left:-20px; overflow:hidden;">{{Hilfe:VisualEditor/!dropdown|MathGroup|nohead=1}}</div></div>
|style="width:210px;"|
{| class="wikitable hintergrundfarbe-basis" style="text-align:center; margin: 0 5px; border:none; width: 180px; border-collapse:separate; border-spacing:2px;"
|-
|colspan="6" style="opacity: .6; border:none; text-align:left;"| {{nowrap|{{int:math-visualeditor-symbol-group-math-accents}}}}
|-
|style="width: 1.5em;"| <math>\dot{a}</math> || <math>\ddot{a}</math> ||style="width: 1.5em;"| <math>\acute{a}</math> ||style="width: 1.5em;"| <math>\grave{a}</math> ||style="width: 1.5em;"| <math>\check{a}</math> ||style="width: 1.5em;"| …
|-
|colspan="6" style="opacity: .6; border:none; text-align:left;"| {{int:math-visualeditor-symbol-group-math-functions}}
|-
| <math>\exp</math> || <math>\exp_a</math> || <math>\ln</math> || <math>\lg</math> || <math>\log</math> || …
|-
|colspan="6" style="border:none; text-align:left;"|<div style="border: 1px dashed #80D080; margin: .5em; padding: .5em; background:var(--background-color-success-subtle,#F0FFE0); color:var(--color-success,#14866D); text-align:center;">''Auswahlfelder''</div>
|}
|}</div>
|- class="hintergrundfarbe1"
| Das Fenster bietet mehrere Schaltflächen:
{{Hilfe/clickbutton|{{CodexIcon|close|px=12|text=Bearbeitung fortsetzen}}}} – Bearbeitung abbrechen schließt das Dialogfenster.<br />
{{Hilfe/clickbutton|Einfügen|mw=p}} – übernimmt die Formel aus dem Vorschaubereich in die Seitenansicht.<br />
Reiter im Menü:<br />
{{Hilfe/clickbutton|{{int:math-visualeditor-mwlatexdialog-card-formula}}}} – Eingabeoberfläche des Dialogfensters.<br />
{{Hilfe/clickbutton|{{int:math-visualeditor-mwlatexdialog-card-options}}}} – [[#math-options|Optionseinstellungen]] des Dialogfeldes.
|}

{{Hilfe:VisualEditor/!headline|3|Mathematische Formeln und Schriftzeichen darstellen|Gesamt=5|VisualEditor/Einfügen=4}}

{| class="wikitable hintergrundfarbe-basis toptextcells"
|- class="hintergrundfarbe9"
| [[Datei:VisualEditor-logo.svg|x20px|alt=|Logo]]
|-
! Formeln einfügen
|- class="hintergrundfarbe1"
| Wenn du beispielsweise eine Wurzelfunktion darstellen möchtest, dann gibt dir das Dialogfenster mehrere Möglichkeiten zur Auswahl.
* gib die Funktionsbeschreibung im TeX-Format in das Eingabefenster ein und die Formel wird im oberen Vorschaubereich ausgegeben.
* scrolle in der linken Hälfte des darunter angezeigten Fensters zum Begriff <code>Wurzeln</code> und klicke eines der dort angezeigten Beispiele an.
|-
| <div class="hintergrundfarbe-basis" style="border: 1px solid #BBBBBB; border-radius: 3px; font-size:90%; width: 420px;">
{{Hilfe/dialog|2=p|label-t={{int:math-visualeditor-mwmathdialog-title}}|label-1=[[Datei:Codex icon close.svg|12px|verweis=|alt=|Abbrechen]]|label-2=Einfügen|noframe=1}}
<div class="skin-invert" style="background:#{{Standardfarbe|hintergrund|5}}; color:#{{Standardfarbe|text|body}}; padding-top:.1em; font-weight:bold;">
{{0|0}}{{Menü-Icon|{{int:math-visualeditor-mwlatexdialog-card-formula}}|non|border=#FFFFFF|padding=2}}{{0|0}}{{Menü-Icon|{{int:math-visualeditor-mwlatexdialog-card-options}}|non|background=#EAECF0|border=#EAECF0|padding=2}}</div>
{| style="padding: .5em;"
|-
|style="line-height: 40px; text-align:center;" title="interaktiver Vorschaubereich mit angezeigter Formel"| <math>\sqrt[n]{2}</math>
|-
| {{int:math-visualeditor-mwlatexdialog-card-formula}}
|-
|
{| style="width: 400px; border: 2px solid #0055DD; margin-bottom: .5em; border-collapse:collapse;"
|-
|class="hintergrundfarbe5" style="width: 25px; text-align:right;"| 1  ||class="hintergrundfarbe1" style="font-family:monospace,courier;"| \{{Hilfe/mark|sqrt|dunkelblau}}[<span style="background: var(--background-color-progressive-subtle,#EAF3FF); color:var(--color-emphasized, #000000);">n</span>]{2}
|-
|class="hintergrundfarbe1" style="height:40px;"| ||
|}
|}
----
{| style="font-size: 90%;"
|-
|
{|
|-
|style="background:var(--background-color-progressive-subtle,#EAF3FF); color:var(--color-progressive, #3366CC); width: 200px;"| {{int:math-visualeditor-symbol-group-math-root}}
|-
| {{int:math-visualeditor-symbol-group-math-operators}}
|-
| {{int:math-visualeditor-symbol-group-math-sets}}
|-
| {{int:math-visualeditor-symbol-group-math-relations}}
|-
| {{int:math-visualeditor-symbol-group-math-geometry}}
|-
| …
|}
|
{| class="wikitable hintergrundfarbe-basis" style="text-align:center; margin: 0 5px; border:none; width: 200px; border-collapse:separate; border-spacing:2px;"
|-
|colspan="7" style="opacity: .6; border:none; text-align:left;"| {{int:math-visualeditor-symbol-group-math-root}}
|-
|style="width:1.5em;"| <math>\surd</math> || <math>\sqrt{2}</math> || <math>\sqrt[n]{2}</math> ||colspan="4" style="border:none;"|
|-
|colspan="7" style="opacity: .6; border:none; text-align:left;"| {{int:math-visualeditor-symbol-group-math-operators}}
|-
| <math>+</math> || − || <math>\pm</math> ||style="width:1.5em;"| <math>\mp</math> ||style="width:1.5em;"| <math>\dotplus</math> ||style="width:1.5em;"| <math>\times</math> ||style="width:1.5em;"| …
|-
|colspan="7" style="opacity: .6; border:none; text-align:left;"| …
|}
|}</div>
|- class="hintergrundfarbe1"
| Wenn du aus dem Vorschlagsbereich beispielsweise <code><math>\sqrt[n]{2}</math></code> anklickst, so wird auch das Eingabefeld direkt mit der passenden TeX-Formel belegt und der darüber befindliche Vorschaubereich zeigt dir diese Formel an. Im Eingabefeld springt der Cursor auf das <code>n</code> in der Formel (hellblau hinterlegt), so dass du dort die Potenz für die Wurzel ändern kannst.
|}

{{Hilfe:VisualEditor/!headline|3|Optionen|Gesamt=5|VisualEditor/Einfügen=4|Anker1=math-options}}

{| class="wikitable hintergrundfarbe-basis toptextcells"
|- class="hintergrundfarbe9"
| [[Datei:VisualEditor-logo.svg|x20px|alt=|Logo]]
|-
! Ausrichtung der Formel ändern
|- class="hintergrundfarbe1"
| Unter Optionen kannst du die Ausrichtung der Formel zum übrigen Text festlegen. Die jeweils aktiv ausgewählte Schaltfläche wird {{Farbe|#{{Standardfarbe|text|link}}|Kreis=1}} blau hinterlegt.
|-
| <div style="border:1px solid #BBBBBB; width:380px; border-radius:3px; font-size:90%;">
{{Hilfe/dialog|2=p|label-t={{int:math-visualeditor-mwmathdialog-title}}|label-1=[[Datei:Codex icon close.svg|12px|verweis=|alt=|Abbrechen]]|label-2=Einfügen|noframe=1}}
<div class="skin-invert" style="background:#{{Standardfarbe|hintergrund|5}}; color:#{{Standardfarbe|text|body}}; padding-top:.1em; font-weight:bold;">
{{0|0}}{{Menü-Icon|{{int:math-visualeditor-mwlatexdialog-card-formula}}|non|background=#EAECF0|border=#EAECF0|padding=2}}{{0|0}}{{Menü-Icon|{{int:math-visualeditor-mwlatexdialog-card-options}}|non|border=#FFFFFF|padding=2}}</div>

<div style="padding: .5em;">
{{int:math-visualeditor-mwlatexinspector-display}}
<div class="mw-ui-button-group skin-invert"><div class="mw-ui-button" style="background:#1155AA; color:#FFFFFF; padding: 3px;">[[Datei:OOjs UI icon math-display-default-invert.svg|alt=|verweis=|18px]] {{int:math-visualeditor-mwlatexinspector-display-default}}</div><div class="mw-ui-button" style="padding: 3px;">[[Datei:Codex icon mathematicsDisplayInline.svg|alt=|verweis=|18px]] {{int:math-visualeditor-mwlatexinspector-display-inline}}</div><div class="mw-ui-button" style="padding: 3px;">[[Datei:Codex icon mathematicsDisplayBlock.svg|alt=|verweis=|18px]] {{int:math-visualeditor-mwlatexinspector-display-block}}</div></div>
<div style="clear:both;"></div>
{{int:math-visualeditor-mwlatexinspector-id}}
{{Hilfe/inputarea|border=2|content=Wurzelziehen|typ=p}}
</div></div>
----
'''Standard'''
<div style="border: 1px dashed #80D080; margin: .5em; padding: .5em;">Text … <math>\sqrt[n]{2}</math> … Text</div>
{{Anker|math-inline}}'''Inline'''
<div style="border: 1px dashed #80D080; margin: .5em; padding: .5em;">Text … <math display="inline">\sqrt[n]{2}</math> … Text</div>
{{Anker|math-block}}'''Block'''
<div style="border: 1px dashed #80D080; margin: .5em; padding: .5em;">Text … <math display="block">\sqrt[n]{2}</math> … Text</div>
|- class="hintergrundfarbe1"
|
Über das Eingabefeld unterhalb von <code>{{int:math-visualeditor-mwlatexinspector-id}}</code> kannst du einen „[[Anker (HTML)|Anker]]“ für die Formel definieren, um auf diese verlinken zu können; dem Math-Tag wird das Attribut <code>id="…"</code> hinzugefügt. Beachte, dass für diese Sprungziele unterschiedliche Bezeichner (id) verwendet werden müssen, falls sich mehrere Sprungziele auf der Seite befinden. Zudem dürten diese Bezeichnungen nicht mit den Überschriften innerhalb der Seite identisch sein.

{{Hilfe/clickbutton|{{CodexIcon|mathematicsDisplayDefault|px=18|text=standard}} {{int:math-visualeditor-mwlatexinspector-display-default}}|ex=1}} – ist die projektspezifische Standardanordnung für Formeln.<br />
{{Hilfe/clickbutton|{{CodexIcon|mathematicsDisplayInline|px=18|text=inline}} {{int:math-visualeditor-mwlatexinspector-display-inline}}|ex=1}} – dem Math-Tag wird das Attribut <code>[[#math-inline|display="inline"]]</code> hinzugefügt, die Formel erscheint an der Cursorposition in einer Linie mit dem Fließtext, sie kann auch innerhalb des Textflusses stehen.<br />
{{Hilfe/clickbutton|{{CodexIcon|mathematicsDisplayBlock|px=18|text=block}} {{int:math-visualeditor-mwlatexinspector-display-block}}|ex=1}} – dem Math-Tag wird das Attribut <code>[[#math-block|display="block"]]</code> hinzugefügt, die Formel erscheint mittig im Text und von diesem durch Umbrüche getrennt.
|}

{{Hilfe:VisualEditor/!headline|3|Formeln bearbeiten|Gesamt=5|VisualEditor/Einfügen=4|Anker1=math-edit}}

{| class="wikitable hintergrundfarbe-basis toptextcells"
|- class="hintergrundfarbe9"
| [[Datei:VisualEditor-logo.svg|x20px|alt=|Logo]]
|-
! Vorhandene Formeln bearbeiten
|- class="hintergrundfarbe1"
| Wenn du eine vorhandene Formel ändern möchtest, dann klicke sie an und es öffnet sich ein Dialogfeld mit zwei Bearbeitungsmöglichkeiten.
|- style="font-size:90%"
| <span style="border: 1px solid #BBBBBB; padding: 2px; background: var(--background-color-progressive-subtle,#EAF3FF); color: var(--color-emphasized, #000000);"><math>\sqrt[n]{2}</math></span>
<div style="border:1px solid #BBBBBB; position:relative; width: 380px; border-radius:3px; margin: .8em 0 .5em 0; padding: .5em;">
<div class="hintergrundfarbe-basis" style="left:10px; line-height:1; position:absolute; top:-.8em;">[[Datei:PokeyNorth.png|oben|20px]]</div>
{| style="width:100%"
|-
|class="skin-invert"| {{Hilfe:VisualEditor/!toolitem|Formel|name=1}} ||style="min-width:250px;"| <div class="mw-ui-button-group skin-invert" style="float:right;"><div class="mw-ui-button" style="line-height: 1em; padding-left:5px; padding-right:5px;">{{Hilfe/mark|Schnelle Bearbeitung|hellblau}}</div><div class="mw-ui-button" style="line-height: 1em; padding-left:5px; padding-right:5px;">{{Hilfe/mark|Bearbeiten|hellblau}}</div></div>
|}
</div>
|-
! Bearbeiten der Formel mit eingeblendeter Vorschlagsliste
|- class="hintergrundfarbe1"
| Das Dialogfeld entspricht in Aussehen und Funktion dem oben beschriebenen [[#math-dialog|Dialogfenster]]. Einzig die Schaltfläche {{Hilfe/clickbutton|Einfügen}} heißt nun {{Hilfe/clickbutton|Fertig}}
|-
! {{int:math-visualeditor-mwlatexcontextitem-quickedit}}
|- class="hintergrundfarbe1"
| Die Schaltfläche {{Hilfe/clickbutton|{{int:math-visualeditor-mwlatexcontextitem-quickedit}}|color=blau}} öffnet ein kleineres Dialogfenster, in dem dir keine Vorschlagsliste mit Auswahlfeldern angeboten wird, dafür aber der Zugriff auf die Optionseinstellungen.
|-
| <span style="border: 1px solid #BBBBBB; padding: 2px; background: var(--background-color-progressive-subtle,#EAF3FF); color: var(--color-emphasized, #000000);;"><math>\sqrt[n]{2}</math></span>
<div style="border:1px solid #BBBBBB; position:relative; font-size:90%; width: 400px; border-radius:3px; margin: .8em 0 .5em 0; padding: .5em 0;">
<div class="hintergrundfarbe-basis" style="left:10px; line-height:1; position:absolute; top:-.8em;">[[Datei:PokeyNorth.png|oben|20px]]</div>
{{Hilfe/dialog|2=i|label-t={{int:math-visualeditor-mwmathdialog-title}}|label-1=[[Datei:Codex icon close.svg|12px|verweis=|alt=|Abbrechen]]|label-2=Fertig|noframe=1}}
----
<div style="padding: .5em;">
{{int:math-visualeditor-mwlatexdialog-card-formula}}
{{Hilfe/inputarea|border=2|content=\sqrt[n]{2} |rows=2|typ=p}}
{{int:math-visualeditor-mwlatexinspector-display}}
<div class="mw-ui-button-group skin-invert"><div class="mw-ui-button" style="background:#1155AA; color:#FFFFFF; padding: 3px;">[[Datei:OOjs UI icon math-display-default-invert.svg|18px|alt=|verweis=]] {{int:math-visualeditor-mwlatexinspector-display-default}}</div><div class="mw-ui-button" style="padding: 3px;">[[Datei:Codex icon mathematicsDisplayInline.svg|alt=|verweis=|18px]] {{int:math-visualeditor-mwlatexinspector-display-inline}}</div><div class="mw-ui-button" style="padding: 3px;">[[Datei:Codex icon mathematicsDisplayBlock.svg|alt=|verweis=|18px]] {{int:math-visualeditor-mwlatexinspector-display-block}}</div></div>
<div style="clear:both;"></div>
{{int:math-visualeditor-mwlatexinspector-id}}
{{Hilfe/inputarea}}
</div></div>
|- class="hintergrundfarbe1"
|{{Hilfe/clickbutton|Fertig|mw=p}} – übernimmt die Änderung in die Seitenansicht.
|}</onlyinclude>

== Weitere Informationen ==
* [[Hilfe:TeX]] – technische Beschreibung der Funktionen zur Formeldarstellung.
* [[Hilfe:TeX/VisualEditor/Chemische Formeln]] – Beschreibung für Darstellung chemischer Formelzeichen.
* [[Hilfe:Tags]] – technische Erklärungsseite zur Verwendung und Funktion von Tags.
* [[Hilfe:VisualEditor/Sonderzeichen]] – Beschreibung zur Einfügung weiterer Sonderzeichen oder Schriftarten.

[[Kategorie:Hilfe:VisualEditor|TeX]]

Hilfe:TeX/VisualEditor - Versionsgeschichte