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

Kategorie: alle Artikel (5) | Diese Website (5) | NPage (2) | Webdesign (2)

< 1 2 >

Tabellensortierung (16.01.2014 11:01:00)

Die Beschreibung zum Einbau einer Tabellensortierung wurde verbessert. (mehr lesen...)

0 Kommentar(e), Kommentar verfassen
 
Link zur aktiven Seite hervorheben (01.07.2013 12:53:00)

Auf vielen Websites wird der Link zur gerade aktiven seite hervorgehoben. NPage unterstützt so etwas leider nicht automatisch. Mein einem kleinen wenig javaScript kann man das aber nachbauen. (mehr lesen...)

0 Kommentar(e), Kommentar verfassen
 
Inhalt unter der Menüleiste (07.06.2013 00:09:00)

Auch bei einer Npage Designvorlage ist es möglich, unter der Menüleiste noch zusätzlichen Inhalt unterzubringen. (mehr lesen...)

0 Kommentar(e), Kommentar verfassen
 

< 1 2 >

Zum Seitenanfang