SyntaxHighlighter 1.5 v Drupalu
Vložil/a Ondra, Čt, 1.1.2009 - 22:27
Občas si chci poznačit nějaký zdrojový kód na blog. Je dobré, když je i zvýrazněna jeho syntaxe. Proto jsem pátral po mém oblíbeném zvýrazňovacím modulu SyntaxHighlighter pro Drupal. Bohužel jsem našel pouze Geshi filter. Nemůžu říct, že by byl špatný, ale mně osobně se líbí onen zmíněný SyntaxHighlighter.
Takže k věci - jak jsem rozchodil SyntaxHighlighter na Drupalu.
- Stáhneme a rozbalíme archiv ze stránky download
- Uploadneme rozbalený adresář dp.SyntaxHighlighter na náš web
- Zkopírujeme si soubor themes/your_favourite_theme/page.tpl.php a otevřeme v našem oblíbeném textovém editoru. Přidáme řádku
<link type="text/css" rel="stylesheet" href="/dp.SyntaxHighlighter/Styles/SyntaxHighlighter.css" />
na začátek souboru do hlavičky. Bude to vypadat asi takto
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="<?php print $language->language;?>" xml:lang="<?php print $language->language; ?>"> <head> <title><?php print $head_title; ?></title> <?php print $head; ?> <!-- nase uprava v hlavicce odsud --> <link type="text/css" rel="stylesheet" href="/dp.SyntaxHighlighter/Styles/SyntaxHighlighter.css" /> <!-- nase uprava v hlavicce az po sem --> <?php print $styles; ?> ... - A tyto řádky přidat můžeme přidat na konec souboru (nebo je lze přidat i na začátek do
hlavičky za řádek, který jsme přidali v předchozím kroku. Není potřeba přidávat úplně všechny, stačí jen syntraxe, které využijeme.
<script type="text/javascript" src="/dp.SyntaxHighlighter/Scripts/shCore.js"></script> <script type="text/javascript" src="/dp.SyntaxHighlighter/Scripts/shBrushCSharp.js"></script> <script type="text/javascript" src="/dp.SyntaxHighlighter/Scripts/shBrushPhp.js"></script> <script type="text/javascript" src="/dp.SyntaxHighlighter/Scripts/shBrushJScript.js"></script> <script type="text/javascript" src="/dp.SyntaxHighlighter/Scripts/shBrushJava.js"></script> <script type="text/javascript" src="/dp.SyntaxHighlighter/Scripts/shBrushVb.js"></script> <script type="text/javascript" src="/dp.SyntaxHighlighter/Scripts/shBrushSql.js"></script> <script type="text/javascript" src="/dp.SyntaxHighlighter/Scripts/shBrushXml.js"></script> <script type="text/javascript" src="/dp.SyntaxHighlighter/Scripts/shBrushDelphi.js"></script> <script type="text/javascript" src="/dp.SyntaxHighlighter/Scripts/shBrushPython.js"></script> <script type="text/javascript" src="/dp.SyntaxHighlighter/Scripts/shBrushRuby.js"></script> <script type="text/javascript" src="/dp.SyntaxHighlighter/Scripts/shBrushCss.js"></script> <script type="text/javascript" src="/dp.SyntaxHighlighter/Scripts/shBrushCpp.js"></script> <script type="text/javascript"> dp.SyntaxHighlighter.ClipboardSwf = '/dp.SyntaxHighlighter/Scripts/clipboard.swf'; dp.SyntaxHighlighter.HighlightAll('code'); </script> - Na konci souboru to bude vypadat přibližně takto:
... <!-- nase uprava na konci souboru odsud --> <script type="text/javascript" src="/dp.SyntaxHighlighter/Scripts/shCore.js"></script> <script type="text/javascript" src="/dp.SyntaxHighlighter/Scripts/shBrushCSharp.js"></script> <script type="text/javascript" src="/dp.SyntaxHighlighter/Scripts/shBrushPhp.js"></script> <script type="text/javascript" src="/dp.SyntaxHighlighter/Scripts/shBrushJScript.js"></script> <script type="text/javascript" src="/dp.SyntaxHighlighter/Scripts/shBrushJava.js"></script> <script type="text/javascript" src="/dp.SyntaxHighlighter/Scripts/shBrushVb.js"></script> <script type="text/javascript" src="/dp.SyntaxHighlighter/Scripts/shBrushSql.js"></script> <script type="text/javascript" src="/dp.SyntaxHighlighter/Scripts/shBrushXml.js"></script> <script type="text/javascript" src="/dp.SyntaxHighlighter/Scripts/shBrushDelphi.js"></script> <script type="text/javascript" src="/dp.SyntaxHighlighter/Scripts/shBrushPython.js"></script> <script type="text/javascript" src="/dp.SyntaxHighlighter/Scripts/shBrushRuby.js"></script> <script type="text/javascript" src="/dp.SyntaxHighlighter/Scripts/shBrushCss.js"></script> <script type="text/javascript" src="/dp.SyntaxHighlighter/Scripts/shBrushCpp.js"></script> <script type="text/javascript"> dp.SyntaxHighlighter.ClipboardSwf = '/dp.SyntaxHighlighter/Scripts/clipboard.swf'; dp.SyntaxHighlighter.HighlightAll('code'); </script> <!-- nase uprava na konci souboru az po sem --> </body> </html> - Teď nahrajeme soubor, který jsme právě upravili (page.tpl.php) zpět na web odkud jsme ho vzali.
- Nyní už jen zbývá vytvořit nový článek se zdrojovým kódem. Řekněme, že to bude kód v jazyku Java, tzn. text bude asi takto:
<pre name="code" class="java"> ... náš java kód ... </pre> - Tuto tabulku jsem si vypůjčil z stránek vývojářů. Jsou v ní uvedeny všechny podporované syntaxejazyků. Alias je pak použit jako parametr v class - viz. předchozí kód.
| Jazyk | Alias |
| C++ | cpp, c, c++ |
| C# | c#, c-sharp, csharp |
| CSS | css |
| Delphi | delphi, pascal |
| Java | java |
| Java Script | js , jscript, javascript |
| PHP | php |
| Python | py, python |
| Ruby | rb, ruby, rails, ror |
| Sql | sql |
| VB | vb, vb.net |
| XML/HTML |
xml, html, xhtml, xslt |
No a tady je výsledek našeho snažení. Zvýraznění syntaxe Java kódu.
/*
* HelloWorldApp.java
*
*/
package helloworldapp;
/**
* The HelloWorldApp class implements an application that
* simply prints "Hello World!" to standard output.
*/
public class HelloWorldApp {
/**
* @param args the command line arguments
*/
public static void main(String[] args) {
System.out.println("Hello World!"); // Display the string.
}