Syntax-HighLighter Einbau bei NPage

Dateien hochladen

Nach dem Entpacken des Programmpakets des Syntaxhiglighters liegen auf  Festplatte diverse Grafik-, CSS- und JavaScript-Dateien sowie eine SWF-Datei.

Hochgeladen werden sollten:

  • sämtliche Grafikdateien. Sie sind dazu da, die kleinen Funktionsicons im Syntax-Highlighter-Fenster darzustellen.
  • die CSS-Dateien shCore.css und shThemeDefault.css. In der Datei shCore.css müssen die Bezüge zu den Grafikdateien angepasst werden.
  • die Flash-Datei clipboard.swf
  • Die JavaScript-Dateien shCore.js, shLegacy.js sowie die sogeannnten Brush-Dateien shBrushxxx.js. Es müssen natürlich nur die tatsächlich benötigten Brushes hochgeladen werden.

Einbau bei NPage

Wie bereits beschrieben (und wie man hier sieht) ist nicht unbedingt erforderlich, ein eigenes Design zu haben, um den SyntaxHihglighter bei NPage einzubauen.

Wenn man, den Syntaxhighlighter mit einer NPage-Design-Vorlage nutzen will, kann man die notwendigen Codebestandteile entweder unter Einstellungen-Sitewide oder nur auf der jeweiligen Textseite einfügen. Der Einbau-Code besteht aus 3 Teilen:

Der Referenzierungsabschnitt

Mit dem Referenzierungsabschnitt wird sichergestellt, dass die für den Syntaxhighlighter erforderlichen Dateien verfügbar sind. So sieht der Referenzierungsabschnitt aus:

<script type="text/javascript" src="https://file1.hpage.com/00xxxx/yy/html/shcore.js"></script>  
<script type="text/javascript" src="https://file1.hpage.com/00xxxx/yy/html/shbrushcss.js"></script>
<link type="text/css" rel="stylesheet" href="https://file1.hpage.com/00xxxx/yy/html/shcore.css" />
<link type="text/css" rel="stylesheet" href="https://file1.hpage.com/00xxxx/yy/html/shthemedefault.css" />

Die konkreten Linkadressen müssen natürlich angepasst werden. Es können auch mehrere shbrushxxx.js-Dateien oder einfach eine andere eingebunden werden.  An Stelle von shthemedefault.css kann auch eine andere Theme-CSS-Datei eingebunden werden.

Initialisierung

Die Initialisierung erfolgt mit einem kurzen Script, bei dem auch die Datei clipboard.swf ausgerufen wird.

<script type="text/javascript">
SyntaxHighlighter.config.clipboardSwf = 'https://designpatch.hpage.com/get_file.php?id=xxxxxxx&vnr=yyyyyy';
SyntaxHighlighter.all();
</script>

In diesen Initialisierungsabschnitt können auch weitere Konfigurationsparameter eingefügt werden. Mehr dazu auf der Seite Einstellungen des Syntaxhighlighters.

Codedarstellung

Der darzustellende Quellcode wird von <pre>-Tags umschlossen. Wichtig ist dabei die Brush-Klasse. Es ist natürlich nur sinnvoll Brushes zu verwenden, zu denen die entsprechende JavaScript-Datei eingebunden wurde.

<pre class="brush: css;">
</pre>

Partnerwebsites

Websites mit Mobirise

  1. Startseite der Mobirise Extension Demo Website auf github.bpgs.de
  2. Übersicht zu den Elementen des Themes Mobirise4 in Mobirise 4, Version 4.7.7 auf demo-zu-netcup.9f8.de
  3. Gesamtübersicht zu den Designblöcken des Mobirise5 Themes AMP auf mobirise5-theme-amp.9f8.de
  4. Mobirise4 mit dem Theme PurityM auf mein-wunschname.de.cool
  5. EASY TO USE! erstellt mit Mobirise 4.4.1 und dem Theme default auf mein-wunschname.webspace.rocks
  6. MOBIRISE3 THEME MOBIRISE3 auf lc-pico-phpfriends.bpgs.de
  7. Website erstellt mit Mobirise3 und dem Theme Mobirise(auch unter dem Namen default) auf lc-ver-bummel.bpgs.de

Neuigkeiten

Neue CSS-Datei für Formularfelder (25.04.2013 07:49:00)

Vor kurzem habe ich festgestellt, dass es bei NPage eine neue CSS-Datei gibt, die automatisch in Webseiten eingebunden wird. Auf Nachfrage im Forum stellte NPage klar, dass diese Datei main.css CSS-Informationen für Formularfelder enthält.

Die Anpassung erfolgt:

bei eigenen Designs unter Design => Design-Einstellungen => CSS-Einstellungen vornehmen

bei Design-Vorlagen unter Design => Design-Einstellungen


Bewertung: (Keine Bewertung)

 
 
Kommentare
 
Keine Kommentare vorhanden.
 
 
Kommentar verfassen
 
Name:
E-Mail:
Betreff:
Kommentar :
 
 
Zum Seitenanfang