Pläne, die das Anpassen von Text im Markdown-Editor unterstützen
Professional | Business | Enterprise |
---|---|---|
Wenn Sie möchten, dass Ihr Inhalt in Artikeln, die auf dem Markdown-Editor basieren, als Akkordeon angezeigt wird, gibt es keine Möglichkeit, ihn mit einem herkömmlichen Tool aus der Menüleiste oder einer einfachen Markdown-Syntax hinzuzufügen.
Verwenden Sie die folgende Problemumgehung, um mühelos ein Akkordeon im Markdown-Editor hinzuzufügen.
Lösung
Gehen Sie zum gewünschten Artikel und öffnen Sie ihn im Markdown-Editor.
Fügen Sie den folgenden Code an der gewünschten Stelle ein, an der das Akkordeon angezeigt werden soll
<details>
<summary>Accordion_name</summary>
<p>Accordion_content</p>
</details>
Ersetzen Sie den
Accordion_name
Text durch den gewünschten Akkordeon-Titel/-NamenErsetzen Sie den
Accordion_content
Text durch den gewünschten Inhalt
Wenn Sie Überschriften innerhalb des Akkordeons hinzufügen möchten, können Sie die Überschriften-HTML-Tags (<h2>..</h2>, <h3>..</h3>, <h4>..</h4>
) in den Accordion_content
Abschnitten verwenden
VORSICHT
Überschriften-Tags können im Zusammenfassungsteil des Akkordeons "Accordion_name
" verwendet werden, aber die Textausrichtung kann beeinträchtigt werden.
Beispiel
Code
<details>
<summary><strong>What is Document360?</strong></summary>
<p>A well-structured product to create a world-class knowledge base for your customers and employees. Content producers get the power, whereas content consumers get the simplicity.</p>
<h4>Core parts</h4>
<ul>
<li>Knowledge base portal</li>
<li>Knowledge base site</li>
<li>Knowledge base widget</li>
<li>API documentation</li>
</ul>
</details>
Ergebnis
Was ist Document360?
Ein gut strukturiertes Produkt, um eine erstklassige Wissensdatenbank für Ihre Kunden und Mitarbeiter zu schaffen. Content-Produzenten erhalten die Macht, während die Content-Konsumenten die Einfachheit erhalten.
Kernteile
Wissensdatenbank-Portal
Wissensdatenbank-Website
Widget für die Wissensdatenbank
API-Dokumentation
Erweiterte Anpassungen für Akkordeons
Sie können das Akkordeon verbessern, indem Sie Farben, gepunktete Rahmen und Symbole hinzufügen und es so einstellen, dass es immer geöffnet ist. So wenden Sie diese Anpassungen an:
Hinzufügen einer Kopffarbe zum Akkordeon
Um dem Akkordeon in den Artikeln eine Kopffarbe hinzuzufügen, führen Sie die folgenden Schritte aus:
Navigieren Sie im Wissensdatenbank-Portal zu Einstellungen () > Wissensdatenbank-Website > Website anpassen > benutzerdefiniertes CSS und JavaScript .
Klicken Sie im linken Navigationsbereich auf die Registerkarte CSS und fügen Sie das folgende CSS-Snippet ein:
.details-wrapper details[open] summary {
background-color: yellow !important;
border-radius: 0.75rem 0.75rem 0rem 0rem !important;
}
.details-wrapper summary {
background-color: yellow !important;
border-radius: 0.75rem 0.75rem 0.75rem 0.75rem !important;
}
.details-wrapper details:not([open]) summary {
background-color: yellow !important;
border-radius: 0.75rem 0.75rem 0.75rem 0.75rem !important;
}
Klicken Sie auf Speichern.
Anwenden einer Rahmenfarbe und gestrichelter Linien
So wenden Sie eine Rahmenfarbe und gepunktete Linien beim Bewegen des Mauszeigers an:
Navigieren Sie im Wissensdatenbank-Portal zu Einstellungen () > Wissensdatenbank-Website > Website anpassen > benutzerdefiniertes CSS und JavaScript .
Klicken Sie im linken Navigationsbereich auf die Registerkarte CSS und fügen Sie das folgende CSS-Snippet ein:
.details-arrow {
left: 16px !important;
top: 42% !important;
transition: revert;
transform: rotate(317deg);
}
.details-wrapper details {
border: 1px dotted var(--e360-base-light-gray) !important;
transition: border 0.3s ease;
}
.details-wrapper details: hover {
border: 1px solid var(--e360-base-light-gray) !important;
}
.details-wrapper_rendered summary {
left: 19px;
position: relative;
}
.details-wrapper details[open]+.details-arrow {
transform: rotate(45deg);
}
Passen Sie den obigen Code an Ihre Bedürfnisse an.
Wenn Sie fertig sind, klicken Sie auf Speichern.
Einstellen eines Akkordeons auf immer geöffnet
Um ein Akkordeon immer geöffnet zu halten, ändern Sie das open
Attribut direkt im HTML-Code:
<details open>
<summary>Always Open Accordion</summary>
<p>Content remains visible without user interaction.</p>
</details>
Dadurch wird sichergestellt, dass der Inhalt standardmäßig sichtbar ist.
Hinzufügen eines Plus-Symbols zur Kopfzeile des Akkordeons
So fügen Sie ein Pluszeichen hinzu, das sich beim Öffnen dreht:
Navigieren Sie im Wissensdatenbank-Portal zu Einstellungen () > Wissensdatenbank-Website > Website anpassen > benutzerdefiniertes CSS und JavaScript .
Klicken Sie im linken Navigationsbereich auf die Registerkarte CSS und fügen Sie das folgende CSS-Snippet ein:
.details-wrapper details summary::before { content: "+"; display: inline-block; margin-right: 10px; transition: transform 0.3s ease; } .details-wrapper details[open] summary::before { content: "-"; transform: rotate(45deg); }
Passen Sie Symbole oder Übergänge nach Belieben an.
Klicken Sie auf Speichern.
Häufig gestellte Fragen
Kann ich ein Akkordeon nur mit Markdown stylen?
Markdown selbst unterstützt keine erweiterte Formatierung oder Interaktivität, wie Sie sie bei HTML und CSS finden würden. Sie können jedoch mit den integrierten Funktionen von Markdown einen einfachen Akkordeoneffekt erzielen, insbesondere mit Plattformen, die dies unterstützen, wie z. B. Document360.
Was sind die Einschränkungen bei der Verwendung von Markdown für Akkordeons?
Browser-Unterstützung:
<summary>
Die<details>
and-Elemente funktionieren in den meisten modernen Browsern, werden aber möglicherweise nicht in allen Markdown-Umgebungen korrekt gerendert.Styling: Sie können das Akkordeon (z. B. Farben, Rahmen) nicht über die Standard-Browserstile hinaus gestalten.
Interaktivität: Die Interaktivität beschränkt sich auf das Ein- und Ausklappen des Textes ohne zusätzliche Animationen oder Gestaltungsmöglichkeiten.
Wie kann ich ein Akkordeon mit Markdown erstellen?
Die Verwendung der <details>
<summary>
und-Tags in Markdown ist der beste Weg, um ein einfaches Akkordeon ohne zusätzliches CSS oder JavaScript zu erstellen. Für verbesserte Formatierungen oder Funktionen müssen Sie auf HTML und CSS zurückgreifen oder einen Markdown-Prozessor verwenden, der benutzerdefinierte Formatvorlagen zulässt.