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

Umbau begonnen (12.04.2013 20:56:00)

Ursprünglich wurde auf dieser Website dargestellt, wie man die NPage Designvorlage o08 durch individuelle Einstellungen anpassen kann. Mittlerweile gibt es bei NPage noch mehr Möglichlichkeiten und teilweise auch bessere Designvorlagen. So sind vor allem einige der Plusvorlagen gut für eine individuelle Anpassung geeignet.

Daher habe ich begonnen, eine individuelle Anpassung der NPage Designvorlage Plus 135 vorzunehmen.


Bewertung: (4,00 Punkt(e) / 1 Bewertung(en))

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