Versionen im Vergleich

Schlüssel

  • Diese Zeile wurde hinzugefügt.
  • Diese Zeile wurde entfernt.
  • Formatierung wurde geändert.

Quellcode Anzeige

Überblick

Name

contentclass-snippet.gif Quellcode Anzeige

Ordner

folderopen.gif Inhalts - Templates

Styleguide

https://www.styleguide.sachsen.de/code-highlight-4797.html

Inhaltsverzeichnis

Inhalt
minLevel1
maxLevel5
outlinefalse
stylenone
typelist
printabletrue


1. Einleitung

Der Seiteninhalt “Quellcode Anzeige” dient lediglich zur einfachen Darstellung von Quellcode oder auch Quelltext genannt. Der Code für sich hat keine Auswirkung auf den oder die Seiteninhalte einer Webseite, wie z. Bsp. der Seiteninhalt “Eingebetter eigener Code”. Häufig wird dies unter Entwicklern von Webseiten oder Webanwendungen genutzt, um anhand des Quellcodes bestimmte Bereiche zu dokumentieren oder auch um Erklärungen zu spezifischen Inhalten eines Quellcodes zu geben und zu beschreiben. So können sich Entwickler und Programmierer untereinander austauschen und z. Bsp. Änderungen an bestimmten Codes dokumentieren. In der allgemeinen Praxis für Redakteure findet dieser Seiteninhalt aber eher selten Anwendung.

Panel
panelIconId1f5a5
panelIcon:desktop:
panelIconText🖥️
bgColor#EAE6FF

2. Verschiedene Darstellungsmöglichkeiten

Der Seiteninhalt “Quellcode Anzeige” erfüllt, wie in der Einleitung bereits beschrieben, einen bestimmte und spezifischen Zweck und lässt sich nur als einfacher Seiteninhalt innerhalb einer Seite darstellen. Eine Integration in andere Seiteninhalte, wie z. Bsp. Akkordeon oder Boxenbereich ist nicht möglich. Die verschiedenen Darstellungsmöglichkeiten sind daher beschränkt.

Darstellung_1.png

2.1 Quellcode Anzeige als einzelner Seiteninhalt

Darstellung der Quellcode Anzeige mit einer Überschrift und einem beispielhaften Beschreibungstext.

Je nach Seitenaufteilung (mit oder ohne Marginalspalte), variiert die Breite der Darstellung.
In der Beispielabbildung ist die Seitenaufteilung “Navigation-Inhalt breit” (ohne Marginalspalte) gewählt.

Info

Siehe dazu Kapitel Die Marginalspalte (Randspalte) 7.7 Marginalinhalte in der Marginalspalte und Kapitel Auswahl der Seitenaufteilung.

Darstellung_2.png

2.2 Quellcode Anzeige als einzelner Seiteninhalt mit Marginalspalte

Darstellung der Quellcode Anzeige mit einer Überschrift und einem beispielhaften Beschreibungstext.

Je nach Seitenaufteilung (mit oder ohne Marginalspalte), variiert die Breite der Darstellung. In der Beispielabbildung ist die Seitenaufteilung “Navigation-Inhalt-Marginalspalte” gewählt.

Info

Siehe dazu Kapitel Die Marginalspalte (Randspalte) 7.7 Marginalinhalte in der Marginalspalte und Kapitel Auswahl der Seitenaufteilung.


Panel
panelIconId270f
panelIcon:pencil2:
panelIconText✏️
bgColor#FFEBE6

3. Verwendung im SmartEdit

3.1 Erstellen des Seiteninhalts “Quellcode Anzeige”

Schrittweise Erläuterung für die Erstellung eines neuen Seiteninhalts basierend auf der CMS-Vorlage “contentclass-snippet.gif Quellcode Anzeige”.

Aktion

Vorschau im CMS

1

Seite öffnen

seite_oeffnen_green.png
2icon_reddot_multilink.png

Seiteninhalte

Seiteninhalte_allgemein.png
3AMnu_ConnectNewPage.gif

Seite erstellen & verknüpfen

seite_erstellen_green.png
4folderopen.gif

Content-Klassen Ordner “Inhalts - Templates” auswählen

Hinweis

Das Bildschirmfoto bildet eine allgemeine Darstellung aller Content-Klassen Ordner ab. Kann ggf. abweichen.

Content_Klassen-Ordner.png
5contentclass-snippet.gif

Content-Klasse “Quellcode Anzeige” auswählen

Hinweis

Das Bildschirmfoto bildet eine allgemeine Darstellung von Content-Klassen ab. Kann ggf. abweichen.

Content_Klassen.png
6

Es erscheint ein Dialogfenster mit einem aus der Content-Klasse generierten Seitennamen, der mit der späteren Überschrift des neuen Seiteinhalts belegt werden sollte.
Diese Überschrift wird nicht auf der erstellten Seite angezeigt. Sie dient als CMS-interne Überschrift.

überschrift_seite_green.png
7

Mit “OK” bestätigen

ok_green.png
8

Darstellung nach Erstellung “Quellcode Anzeige”.

Dartsellung_nach_Erstellen.png

3.2 Bearbeiten des Seiteninhalts “Quellcode Anzeige”

Dartsellung_nach_Erstellen.png

Bezeichnung

Beschreibung

icon_reddot_openpage (1).png Quellcode Anzeige öffnen

Seiteninhalt zur Bearbeitung öffnen

icon_reddot_closepage (1).png Quellcode Anzeige schließen

Bearbeitung beenden

icon_reddot.png Überschrift

Einfügen einer Überschrift (optional)

icon_reddot.png Text

Einfügen eines Textes oberhalb der Quellcode Anzeige (optional)

icon_reddot.png Programmiersprache

Auswahl der dargestellten Programmiersprache (js, html, css)

icon_reddot.png Code

Einfügen des entsprechend Quellcodes. Die schrittweise Erläuterung der einzelnen Schritte wird im Abschnitt 3.2.1 Code einfügen erklärt.

icon_reddot.png Zeilen

Markieren von bestimmten Zeilen. Die schrittweise Erläuterung der einzelnen Schritte wird im Abschnitt 3.2.2 Zeilen bearbeiten / markieren erklärt.

3.2.1 Code einfügen

Symbol

Aktion

Vorschau im CMS

1icon_reddot.png

Code

Code_einfuegen.png
2

Eingabe des Quellcodes

  • entsprechenden Code einfügen

  • Mit “Speichern” bestätigen

  • “Schließen”

Code_einfuegen_Editor.png
3

Darstellung nach Einfügen des Codes

Darstellung_Code_einfuegen.png

3.2.2 Zeilen bearbeiten / markieren

Symbol

Aktion

Vorschau im CMS

1icon_reddot.png

Zeilen

Zeilen_markieren.png
2

Hinzugefügte Zeilen

  • entsprechende Codezeilen eingeben

Info

die einzelnen Zeilennummern müssen mit einem Semikolon getrennt werden.

  • Mit “OK” bestätigen

Entfernte Zeilen

  • entsprechende Codezeilen eingeben

Info

die einzelnen Zeilennummern müssen mit einem Semikolon getrennt werden.

  • Mit “OK” bestätigen

Zeilen_markeiern_Editor_detail.png
3

Darstellung nach Bearbeitung

  • hinzugefügte Zeilen werden mit grauen Hintergrund, mit einem “+” und in grün markiert

  • entfernte Zeilen werden mit mit grauen Hintergrund, einem “-” und in rot markiert

Darstellung_nach_markieren.png

Panel
panelIconId1f50d
panelIcon:mag:
panelIconText🔍
bgColor#E3FCEF

4. Häufig gestellte Fragen (FAQ)

Frage

Antwort