Please enable JavaScript!
Bitte aktiviere JavaScript!
S'il vous plaît activer JavaScript!
Por favor,activa el JavaScript!
antiblock.org

Syntax-Highlighter Einbau bei NPage

{$debug=1} {if {$page_title}=="Orginaldesign ansehen"} {head} {/head} {elseif {$page_title}=="Orginaldesign mit Zusatz im Menu"} {head} {/head} {elseif {$page_title}=="Orginaldesign mit Fußleiste"} {head} {/head} {elseif {$page_url}|contains:'preview'}

Vorschau

{elseif {$page_url}|contains:'136'} {head} {/head} {else} {head} {/head}
{/if}

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="http://file1.npage.de/00xxxx/yy/html/shcore.js"></script>  
<script type="text/javascript" src="http://file1.npage.de/00xxxx/yy/html/shbrushcss.js"></script>
<link type="text/css" rel="stylesheet" href="http://file1.npage.de/00xxxx/yy/html/shcore.css" />
<link type="text/css" rel="stylesheet" href="http://file1.npage.de/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 = 'http://designpatch.npage.de/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>

{if {$page_title}=="Orginaldesign ansehen"} {elseif {$page_title}=="Orginaldesign mit Zusatz im Menu"} {elseif {$page_title}=="Orginaldesign mit Fußleiste"}

In diese Fussleiste kann man allen möglichen Kram einbauen: Links zu anderen Website, irgendwelche Like-Buttons, die News, ja wahrscheinlich sogar das Kontaktformular. Das ist dann nur noch eine sache der Formatierung.

{else}
Tabellensortierung (16.01.2014 11:01:00)

Die Beschreibung zum Einbau einer Tabellensortierung wurde verbessert und erweitert. Anhand eines Beispiels kann man den Einbau einer sortirbaren tabelle bei nPage künftig besser nachvollziehen. Außerdem wurde ein Downloadlink zur JavaScript-Datei bereit gestellt. Das kleine Tutorial findet man auf der Seite Tabelle sortieren.


Bewertung: (Keine Bewertung)

 
 
Kommentare
 
Keine Kommentare vorhanden.
 
 
Kommentar verfassen
 
Name:
E-Mail:
Betreff:
Kommentar :
 
 
{/if} Zum Seitenanfang
nPage.de-Seiten: weltportfolio.info | Utes Welli-Revier