Ich suche nach einer Möglichkeit, Code in meinem (benutzerdefinierten, proprietären) Blog auf schöne Weise anzuzeigen. Also brauche ich eine Art Syntax-Highlighter. ABER WARTE . Ich plane tatsächlich, mehrere gleichwertige Code-Snippets in verschiedenen Sprachen zu veröffentlichen, und idealerweise möchte ich, dass es Registerkarten gibt, die jemand schnell durchblättern kann, um die verschiedenen Versionen zu sehen. Zum Beispiel eine Registerkarte für Java, eine andere Registerkarte für PHP und so weiter.
Ich erkenne, dass ich eine Syntaxhervorhebungsbibliothek finden könnte, die mir gefällt, und sie dann in meinen eigenen Code einschließen könnte, um die Registerkarten zu wechseln, aber ich hoffe, dass es bereits eine Bibliothek gibt, die diese Funktion standardmäßig enthält.
Irgendwelche Vorschläge?
highlight.js und JQueryUI wie in diesem Beispiel ?
<!doctype html>
<html lang="en">
<head>
<title>Syntax-highlighting and tabs</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.9.1/highlight.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.9.1/styles/default.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
</head>
<body>
<script>
$(document).ready(function()
{
$('#tabs').tabs();
// We've put our tabs at the bottom - which does require some annoying cleanup
$('#tabs li').removeClass('ui-corner-top').addClass('ui-corner-bottom').css('top', '-7px').css('border-top', 'none');
$('#tabs div').css('height', '250px');
hljs.initHighlightingOnLoad();
});
</script>
<div id="tabs" style="width:600px">
<div id="tabCpp">
<pre><code class='c++'>
#include <iostream>
int main()
{
std::cout << "Hello World!";
}
</code></pre>
</div>
<div id="tabJava">
<pre><code class='java'>
public class HelloWorld {
public static void main(String[] args) {
// Prints "Hello, World" to the terminal window.
System.out.println("Hello, World");
}
}
</code></pre>
</div>
<div id="tabPhp">
<pre><code class='php'>
<?php
echo("Hello World!");
?>
</code></pre>
</div>
<ul>
<li><a href="#tabCpp">C++</a></li>
<li><a href="#tabJava">Java</a></li>
<li><a href="#tabPhp">PHP</a></li>
</ul>
</div>
</body>
</html>
Die Python-Bibliothek pygments kann über 300 Sprachen syntaktisch hervorheben (Sie können mehr definieren) und in einer Reihe von Formaten ausgeben, darunter HTML-, RTF-, LaTeX- und ANSI-Sequenzen, oder Sie können benutzerdefinierte Formatierer definieren.
Es wird mit einer Befehlszeilenschnittstelle geliefert, pygmentizeaber es gibt auch Jython- Port- Jygments , die Sie verwenden könnten.
Es gibt auch Pygmentize (Bundled) , das eine JavaScript-Schnittstelle zu Pygments bereitstellt.
Da Ihre Codebeispiele in verschiedenen Sprachen vorliegen und daher unterschiedliche Inhalte haben, muss die Syntaxhervorhebung auf jeder Registerkarte nicht tabulatorfähig sein. Sie können Ihre Codebeispiele einfach für jede Registerkarte syntaxhervorheben und sie als statische Webelemente bereitstellen.
Izzy