Ixiters Hilighter Demo

Ixiters Hilighter ist ein Sourcecode-Highlighter speziell für Quelltexte von Webseiten.

Die gängigen "Programmiersprachen" einer Webseite werden erkannt und mit unterschiedlichen Highlightings versehen. Unterstützt wird HTML, Javascript, CSS und PHP. Dabei können die verschiedenen Sprachen innerhalb eines Quelltextes wechseln.

Weiter unten sehen Sie den mit Ixiters Hilighter formatierten Quelltext dieser Seite, in dem alle unterstützten Programmiersprachen vorhanden sind.

Ein bisschen Javascript zur Demo

Klick mich!

Du hast bereits 0 mal geklickt

Quelltext dieser Webseite

  1. <!DOCTYPE html>
  2. <html>
  3. <!-- Hier ist HTML5 und das entsprechende Syntax-Highlighting -->
  4.     <head>
  5.         <title>Ixiters Hilighter Demo</title>
  6.  
  7.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  8.  
  9.         <script type="text/javascript">
  10.             // Hier schalten wir um auf Javascript-Highlighting
  11.             var counter = 0;
  12.  
  13.             function klick(){
  14.                 counter++;
  15.                 document.getElementById('counter').innerHTML = counter;
  16.             }
  17.         </script>
  18.  
  19.         <style type="text/css">
  20.             /* Hier sind wir im CSS-Highlighting */
  21.             /* Da sind die Kommentare gleich viel stylishererer */
  22.             body {
  23.                 font-family: verdana, georgia, arial, sans-serif;
  24.             }
  25.             a#klickmich {
  26.                 color:#f00000;
  27.                 font-weight:bold;
  28.                 text-decoration:none;
  29.             }
  30.  
  31.             .sourcecode {
  32.                 border:1px solid #a0a0a0;
  33.                 background:#f8f8f8;
  34.                 margin:10px 0;
  35.                 padding:5px;
  36.                 white-space:normal;
  37.             }
  38.             #main {
  39.                 width:1040px;
  40.                 margin:0 auto;
  41.             }
  42.  
  43.             #footer {
  44.                 font-family:arial, sans-serif;
  45.                 border-top:1px solid #a0a0a0;
  46.                 text-align:center;
  47.                 font-size:.8em;
  48.                 color:#808080;
  49.             }
  50.             #footer a{
  51.                 color:#606060;
  52.                 font-weight: bold;
  53.                 text-decoration:none;
  54.             }
  55.             #footer a:hover{
  56.                 text-decoration:underline;
  57.             }
  58.         </style>
  59. <!-- Jetzt sind wir wieder im HTML-Highlighting -->
  60.     </head>
  61.     <body>
  62.         <div id="main">
  63.             <div id="header"></div>
  64.             <div id="content">
  65.                 <h2>Ixiters Hilighter Demo</h2>
  66.                 <p><a href="./">Ixiters Hilighter</a> ist ein Sourcecode-Highlighter speziell für Quelltexte von Webseiten.</p>
  67.                 <p>Die gängigen "Programmiersprachen" einer Webseite werden erkannt und mit unterschiedlichen Highlightings versehen. Unterstützt wird HTML, Javascript, CSS und PHP. Dabei können die verschiedenen Sprachen innerhalb eines Quelltextes wechseln.</p>
  68.                 <p>Weiter unten sehen Sie den mit <a href="./">Ixiters Hilighter</a> formatierten Quelltext dieser Seite, in dem alle unterstützten Programmiersprachen vorhanden sind.</p>
  69.                 <hr>
  70.  
  71.                 <h3>Ein bisschen Javascript zur Demo</h3>
  72.                 <a id="klickmich" href="javascript:klick();">Klick mich!</a>
  73.                 <p>Du hast bereits <span id="counter">0</span> mal geklickt</p>
  74.  
  75.                 <div class="sourcecode">
  76.  
  77. <?php
  78. // Und hier ist es PHP-Highlighting
  79. include('Ixiter_Geshi.php');
  80.  
  81. $src = file_get_contents(__FILE__);
  82. $lang = 'website-ish';
  83. $geshi = new Ixiter_Geshi($src, $lang);
  84. $geshi->enable_keyword_links(false);
  85. echo <<<hurrz
  86. <h3>Quelltext dieser Webseite</h3>
  87. hurrz;
  88. echo $geshi->parse_code();
  89. ?>
  90.  
  91. <!-- Und zum Schluss noch einmal HTML-Highlighting -->
  92.                 </div>
  93.             </div>
  94.             <div id="footer">
  95.                 <?php echo '© 2011 by Ixiter'; /* Natürlich geht das auch bei Inline PHP */ ?> <strong>·</strong> <a href="./impressum.php">Impressum</a>
  96.             </div>
  97.         </div>
  98. <!-- Piwik -->
  99. <script type="text/javascript">
  100. var pkBaseURL = (("https:" == document.location.protocol) ? "https://ixstats.dyndns.org/" : "http://ixstats.dyndns.org/");
  101. document.write(unescape("%3Cscript src='" + pkBaseURL + "piwik.js' type='text/javascript'%3E%3C/script%3E"));
  102. </script><script type="text/javascript">
  103. try {
  104. var piwikTracker = Piwik.getTracker(pkBaseURL + "piwik.php", 13);
  105. piwikTracker.trackPageView();
  106. piwikTracker.enableLinkTracking();
  107. } catch( err ) {}
  108. </script><noscript><p><img src="http://ixstats.dyndns.org/piwik.php?idsite=13" style="border:0" alt="" /></p></noscript>
  109. <!-- End Piwik Tracking Code -->
  110.     </body>
  111. </html>
(Sourcecode highlighting by Ixiters Hilighter)