WP Plugin: Syntax Highlighter ComPress

Veröffentlicht am 23. Apr. 2010 von André Gärtner in Featured, WordPress

Syntax Highligher ComPress ist ein kleines von mir geschriebenes Plugin für WordPress, das auf dem bekannten SyntaxHighlighter Script von Alex Gorbatchev basiert. Es ermöglicht Quelltext von unterschiedlichsten Auszeichnungs- und Programmier-Sprachen grafisch hervorzuheben.

Es existieren bereits einige SyntaxHighligher Plugins für WordPress. Diese sind jedoch alle nicht ganz so komfortabel zu nutzen oder sorgen für lange Ladezeiten, da sehr viele einzelne Javascript Dateien geladen werden. Syntax Highligher ComPress umgeht diese Schwächen:

NEU: Die Syntax-Dateien (Brushes) werden dynamisch geladen. Es werden nur die Synatx-Dateien geladen, die auch wirklich auf der Seite benötigt werden.
Quelltext kann ganz einfach über ein Werkzeug in den WordPress Texteditor eingefügt werden, ohne das vorher alle ‘< ‘ escaped werden müssen.

Unterstützte Auszeichnungs- und Programmier-Sprachen sind: AppleScript, ActionScript3, Bash/shell, ColdFusion, C#, C++, CSS, Delphi, Diff, Erlang, Groovy, JavaScript, Java, JavaFX, Perl, PHP, Plain Text, Python, Ruby, Scala, SQL, Visual Basic und XML.

Lokalisiert ist das Plugin für: Deutsch und Englisch

Download:
Syntax Highlighter ComPress 3.0.83.2 (534,5 KiB, 702 klicks)

Download:
Syntax Highlighter ComPress 3.0.83.1 (251,0 KiB, 649 klicks)

Download:
Syntax Highlighter ComPress 2.1.364.1 (168,9 KiB, 657 klicks)

For English Users: Check out the official WordPress plugin website or the ‘readme.txt‘ from the plugin zip-archive. There you can find all information about the plugin in english. If you have questions, feel free to write.

Installation:

Für die Installation wird mindestens WordPress 2.6 benötigt.

Entpacke das Archiv und lade den Ordner ‘syntax-highlighter-compress‘ in deinen ‘wp-content/plugins/‘ Ordner.
Aktiviere das Plugin, indem du dich in das Admin-Menu einloggst und dort unter ‘Plugins‘ den ‘Aktivieren‘ Link des ‘Syntax Highlighter Compress‘ Plugins klickst.
Fertig.

Benutzung:

Code über den TinyMCE Knopf einfügen:

Erstelle einen neuen Artikel oder eine neue Seite in WordPress bzw. öffne einen vorhandenen Artikel oder eine vorhandene Seite.
Platziere den Schreibcursor an der Stelle in der Textbox, an der du den Code einfügen möchtest.
Klicke auf den neuen TinyMCE Knopf, der sind in der Werkzeugleiste befindet (siehe Screenshot).
Füge deinen Code in die Textbox von dem Popup ein und stelle über die Dropdown Liste ein, um welchen Syntax es sich handelt.
Klicke auf ‘Einfügen‘.
Fertig.

TinyMCE Knopf und Popup

Code ohne den TinyMCE Knopf einfügen:

Ersetze bei deinem Code alle ‘< ‘ mit ‘<‘. Am besten geht dies in einem Texteditor, der eine Suche und Ersetzen Funktion hat.
Schließe deinen Code wie folgt in ein pre Tag ein:
```
<pre class="brush:[code-alias]">[Your Code Here]</pre>
```
Das [code-alias] Segment musst du mit dem entsprechenden Syntax-Alias (Brush) ersetzen. Die Brush-Aliases findest du hier übersichtlich dargestellt. Für PHP Code würde das dann in etwas wie folgt aussehen:
```
<pre class="brush:php">
  &lt;?php
    $input = array("Neo", "Morpheus", "Trinity");
    $rand_keys = array_rand($input, 2);
    echo $input[$rand_keys[0]] . "\n";
  ?>
</pre>
```
Füge den fertig aufbereiteten Code an der gewünschten Stelle in WordPress ein. Achte dabei darauf, dass du dies in der HTML Ansicht machst.
Fertig.

Über zusätzliche Parameter, die im pre Tag angegeben werden können, kann die Darstellung noch angepasst werden. Weitere Informationen dazu findest du hier.

Beispiele:

PHP:

function fibonacci($n){
  /*
   * Notice that in PHP, we do not have to declare our variables, nor must we
   * declare their types. Also see how variables in PHP are prefaced with the
   * dollar sign. Other than that, this is identical to the C version of this function.
   */
  $a = 0;
  $b = 1;
  for ($i = 0; $i < $n; $i++){
    printf("%d\n",$a);
    $sum = $a+$b;
    $a = $b;
    $b = $sum;
  }
}

JavaScript:

<script language="JavaScript1.3" type="text/javascript">
<!--
function fibonacci() {
  var a,b,s,i;
  a=0;
  b=1;
  s=b+a;
  for (i=2; i < 40; i++){
    document.write("i= " + i + "<br>");
  }
}
-->
</script>

XML:

<addresses>
  <person>
    <name>
      <first>Ingo</first>
      <last>Melzer</last>
    </name>
    <city>Laupheim</city>
    <country>Germany</country>
  </person>
  <person>
    <name>
      <first>Andreas F.</first>
      <last>Borchert</last>
    </name>
    <city>Lonsee</city>
    <country>Germany</country>
  </person>
</addresses>

Frequently Asked Questions:

Q: Mit welchen Browsern funktioniert das Plugin?
A: Das Plugin läuft auf den gängigsten Browsern (IE, Firefox, Chrome, Safari).

Q: Mit welcher WordPress Version ist das Plugin kompatibel?
A: Das Plugin läuft ab der Version 2.6 und wird wohl bis zur Version 3.0 laufen.

Changelog:

Version 3.0.83.2:

Fehler beim Brush Autoloader Script behoben
Fehler behoben, der bei leeren Tab-Size Feld im Settingsmenu dazu führte, dass das Plugin nicht richtig lief
Code aufgeräumt

Version 3.0.83.1:

Neues Syntax Highlighter Script (Version 3.0.83) wird verwendet
Dynamisches Brush Loading: nur die auf der Seite benötigten Brush Dateien werden geladen
Einstellungs-Menü hinzugefügt: Stylesheet kann ausgewählt werden und andere Einstellungen können getroffen werden
Neue Sprachen im Einfügen-Dialog hinzugefügt

Version 2.1.364.1:

Erste Version, bisher noch nichts geändert.

Spenden:

Wenn du mit dem Plugin zufrieden bist und mich gerne unterstützen möchtest, bin ich über jede Spende sehr erfreut!

33 Kommentare

Melvis Leon

27. Apr. 2010

Hi, I translate you plugin to spanish, where can I send you

André Gärtner

27. Apr. 2010

Hi, I have send you my email address.

Stewart

01. Jul. 2010

Awesome plugin!!!
I did find a bug thought. Have you tried adding code whilst in the fullscreen editor (for posts)? I have, and it didn’t work for me. Apart from that great plugin. Only thing I can think of is a settings page where you can customise the background. Because I prefer a simple gray colour, but it’s okay

André Gärtner

01. Jul. 2010

Thanks for your hint, I’ll check that.
I’ll also consider your request. So far you are the first with wishes

Stewart

02. Jul. 2010

It’s just that people aren’t bothered to comment, most of the time, unless they need help or something xD Is there a bug or am I just crazy? Lol, I love the “comment” button. It says” Abs Chicken”. Lol.

Stewart

07. Jul. 2010

Um. Hello again. Sorry I keep posting and stuff, but I’ve thought of an improvment. When you click “Copy to clipboard”, the code gets copied, but when you paste it you lose ALL formatting. Which means it comes out in a strait line. If you can fix this then I’d stay with your plugin because it’d be great, but when you’re trying to teach good coding habits you just can’t have it like that. Also maybe remove the “Syntax Highlighter: The code is in your clipboard now” message. Just because people probably know that

I’m really sorry I can’t use it. I really am. ‘Coz it’s awesome. But if the code comes out in a strip… :’(
- Stewart

André Gärtner

07. Jul. 2010

I dont have that problem you have mentioned. When I paste the copied code into Notepad the code has all the formating. Where do you paste the code into? Anyways, that not a Problem of my plugin. This would be a problem of the used SyntaxHighlighter Script of Alex Gorbatchev.
I have seen, that he released a new version of his script. I try to update my plugin with the new version.

Stewart

08. Jul. 2010

Sorry, yes. I just came back to say that. It doesn’t seem to work in Notepad, but when I tested it in Notepad++ it comes out fine. Very sorry to be an inconveniance . I’ll, err, go now. Sorry. Thanks for the awesome plugin

William

08. Jul. 2010

Latest update fails on my blog. Can the dynamic brush loading be turned off?

André Gärtner

08. Jul. 2010

Looks like, that you have a problem with the tab-size. Open the settings menu and check if you have a number in the tab-size field.
In the next release I integrate a form check, that validates if a correct tab-size was entered.

Stewart

03. Aug. 2010

I’m not sure if my comment showed up or not, so I’ll write a similar one . If it has, you can delete this .

I was wondering if it’s possible to create a syntax highlighting “brush” for a language that you haven’t supported? I have tried, sortof, to do it, but I can’t really figure it out. If you can point me in the direction of which files I need to modify I’ll probably be able to work it out from there (and, if you have time, how I need to modify them. Like, which parts )

Only if you have time though . Have a nice day!

Stewart

05. Aug. 2010

Hello hello! I’m really quite chatty, aren’t I? Anyway, thank you very much for your advice and I now have a GML brush! YAY!!!!! I even edited some code so I could use the tinymce visual editor to place my code into my posts…

Anyway, after all this I’ve found a bug, if you want to call it that. When you double-click on the code (this is in the webpage) it loses it’s syntax highlighting and becomes editable. When you click away from the code it becomes highlighted and returns to it’s original state.

I’ve tried this with FireFox 3.6.8 and Internet Explorer and they both have the same problem. Sorry for being such a downer .

Anyway, I’ll still stick with your plugin because I hate long-loading pages and I’ve created a brush for it . Thanks and have a nice day!

André Gärtner

05. Aug. 2010

The point you mentioned is a bug or feature of Alex Gorbatchev script I use for the plugin. Not my fault

Stewart

09. Aug. 2010

I’ll stop reporting “bugs” now, as it all seems to be poor Alex Gorbatchevs’ fault . Thanks for the wonderful plugin. I’ll report this to him and maybe he’ll fix it

Jonathan Lampe

13. Sep. 2010

Has this been testing on WordPress 3.0.1? I upgraded to that recently and the plug-in seems to have quit working.

See http://www.divconq.com/2010/migrate-a-relational-database-into-cassandra-part-iv-northwind-import/ for an example of a page that would normally have shown XML, JavaScript and Plain Text tags, but now only shows a bunch of PRE tags. (Yes, I uninstalled and reinstalled since – no change.)

Great plug-in!

André Gärtner

13. Sep. 2010

Hi, my blog is running WP 3.0.1 and as you can see, the plugin works. I checked your sourcecode and I noticed that you have not set the tab-size. Enter a number in the settings-menu and it will work again. The next release will have a form check, that this error wont occure again

Deepesh

21. Sep. 2010

As a part of enhancement, I suggest that this plugin should have a Copy functionality, i.e. like the ‘?’ icon at the topright, you should have a Copy code functionality.
Automatic Indenting is also one of the options, but its too much work.

Anonymous

23. Sep. 2010

It would be nice if the .js were loaded on only the pages that needs it, just like sh-evolved does. It would also be nice if the js were loaded at the wp-footer, as it is more conventional.

André Gärtner

23. Sep. 2010

@Deepesh: You just habe to select the code and copy it. The line numbers wont be copied as in the previous version. what so you mean with auto indenting?

@Anonymous: all what you wish is implemented in the current version. brush files get loaded in the wp-footer and it only loades the brushes, that are needed.

max

24. Sep. 2010

Danke.

Wenn die kommenden Version mit einem Button den Code in den Zwischenspeicher kopieren kann, dann spendier ich dir ein kühles Bier.

MAX

Chris

07. Nov. 2010

I just downloaded and installed this plug-in. It works good but every time I try to change the settings it logs me out of wordpress and doesn’t save the settings. Any ideas?

André Gärtner

09. Nov. 2010

Hi Chris! Sry I can’t reproduce the problem you have mentioned. Which browser do you use? Maybe it is a browser issue or cookie problem?!

Mac Shadid

21. Jan. 2011

Hey very nice weblog!! Guy .. Beautiful .. Remarkable .. I’ll bookmark your blog and take the feeds
also…

realkankan

11. Apr. 2011

There is a bug like this:
source:
#include // abc
main() { return; }

after:
1 | #include
2 | // abc
| main() {return; }

The number is on the wrong line.

André Gärtner

11. Apr. 2011

Hi realkankan, I cannot reproduce the bug you have mentioned.

Mari

22. Jul. 2011

Hi, thank you for your plugin. Tell please, how can I add copy, print and other bottons on page when I display code. How can I change plugin’s code for this?

André Gärtner

23. Jul. 2011

it is no longer possible to add the buttons because it is not necessary any more. You can simply select the code and copy it (without the line numbers).

Daniel

16. Okt. 2011

Nützliches Plugin, danke!

schmelle2

10. Dez. 2011

Syntax Highligther supports Microsoft Powershell, but unfortunately it’s not in your list of available languages.
Could you please change this to support powershell???

Thanks Peter

Wordpress 3.3 jQuery Errors

18. Dez. 2011

Your Syntax Highlighter plugin breaks my theme after updating to WordPress 3.3. I think there is a conflict with jQuery 1.7.1 that WordPress now auto loads into the header from wp-includes in v3.3. When your plugin is active, everything using jQuery in my theme stops working.

I like your plugin better than the other syntax highlighters out there so I really hope you can fix it!

Thanks!
-Longtime user

André Gärtner

19. Dez. 2011

Hi, I updated my blog to 3.3 now and as you can see, there is no problem. I also checked it with some other themes. I cant find any problem. Maybe ist a problem with your theme or another updated plugin?! Which website is it, you have the problem with?

Patrick

22. Jan. 2012

Hallo Andre,

ich nutze das Plugin schon seit langem, ist einfach die komfortabelste Möglichkeit, um lange Quellcodes in WordPress einzubinden und zu highlighten.

Jedoch ist mir eine Sache aufgefallen: wurden Leerzeilen schon immer entfernt oder ist dies seit einer neueren Version so? Es leidet nälich die Lesbarkeit der geposteten Codes etwas darunter, dass Leerzeilen nicht angezeigt werden und ich meine, das Problem bestand nicht immer…

André Gärtner

22. Jan. 2012

Hallo Patrick,

ja mit der neuen WP Version hat sich irgendwas mit dem TinyMCE getan. Mir ist aufgefallen, dass es nur noch richtig funktioniert, wenn bei den TinyMCE Advanced Settings ‘Stop removing the p and br tags’ deaktiviert ist. Anderen Falls werden die Umbrüche immer zerschossen. Ich hoffe das hilft dir erstmal.