Git Product home page Git Product logo

syntaxhighlighter's Introduction

SyntaxHighlighter v4

GratiPay Build Status Downloads Version

SyntaxHighlighter is THE client side highlighter for the web and web-apps! It's been around since 2004 and it's used virtually everywhere to seamlessly highlight code for presentation purposes.

The history of this project predates majority of the common web technologies and it has been a challenge to dedicate time and effort to keep it up to date. Everything used to be in one file and assign window variables... Horrors!

SyntaxHighlighter is currently used and has been used in the past by Microsoft, Apache, Mozilla, Yahoo, Wordpress, Bug Labs, Freshbooks and many other companies and blogs.

⚡ Reporting an issue? See Filing Issues. ⚡

Get Started

FAQ

  • v4 is fully compatible with old brushes and themes, see Building instructions.
  • The ? was completely removed for cleaner, more seamless experience.
  • You still have to HTML escape < when using <pre/> tags.

Older Version

If you are looking for v3 documentation and download, you can find it on the old site.

Support

As it always goes with open source, you are welcome to use SyntaxHighlighter free of charge. If you are using and enjoying my work, maybe you could buy me a beer (or if you don’t drink – a coffee and bagel will do just fine, a good kind of bagel though, you know… with wonderful stuff inside to make it glorious, like smoked salmon and creamcheese… not just butter).

Please click here to donate via PayPal and just like they say on TV – give generously! It motivates me to keep working on this (12 years now and counting).

License

MIT

syntaxhighlighter's People

Contributors

abbeycode avatar acollign avatar alexbeletsky avatar alexgorbatchev avatar appetere avatar chrisjefferson avatar claushellsing avatar crumblingstatue avatar dupontcy avatar elazar avatar exodist avatar hski-github avatar ianneub avatar jcloutz avatar jedahu avatar jmm avatar majie avatar michelemottini avatar millermedeiros avatar payliu avatar rwstauner avatar rwz avatar scootergrisen avatar slevithan avatar synhershko avatar tboronczyk avatar teoli2003 avatar timheuer avatar tinpont avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

syntaxhighlighter's Issues

demos

I think the paths to css and js in the demo files should be relative and rely on ../ rather than /

Haskell code ?

It is very nice to have haskell code recognized by your script specially in self-hosted version.
Please keep an eye on this language in your spare time. It would be great esp. for guys like me how want to have haskell config highlighted in their Blog.

[Javascript Brush] Specifying strings with single quotes in functions.

Hi,

I was recently writing a tutorial on my website, only to find when publishing it that the syntax highlighting had really screwed up (for some reason unknown to me).
As can be demonstrated, here: http://www.dev-hq.net/7-Javascript/54-If-and-Else-statements
Using strings that are created using single quotes (apostrophes) inside a function, seems to really mess up the JScript SyntaxHighlighting. Like so:

var name = prompt('What is your name?');
if(name=='Joe') //If the user's name is 'Joe'
{
    alert('Wow, cool – my name is Joe too!');
}
else if(name=='Fred') //If the user's name is 'Fred'
{
    alert('Fred is a pretty generic name...');
}
else if(name=='John') //If the user's name is 'John'
{
    alert('Alright, John?');
}
else if(name=='George') //If the user's name is 'George'
{
    alert('George is a pretty decent name.');
}
else
{
    alert('I have no opinion on your name.');
}

Multi-Brush Highlighting?

For example, combine 2 brushes and use them appropriately. Like, HTML and Javascript, so everything is nicely highlighted.

Update Installation Documents

Source directories in the current download do not match the directories in the online documentation.

Lots of troubleshooting and firing blindly to finally get it working.

Empty first line is dropped

if I have a pre block of code that starts with a blank line, the line is not rendered by SyntaxHighlighter. This appears to happen if the first line contains only whitespace or contains only a newline.

For example, the following pre block:

public class Foo {
}

will be rendered without the initial blank line.

public class Foo {
}

Line numbering and highlighting will all be off by one. The problem also appears to occur for trailing blank lines. Blank lines surrounded by non-blank lines render properly.

about button (?) sticky

when a code box needs scrollbars the about button (?) stick over the word and follows when I move the scrollbar.

(using version 3.0.83)

Copy Paste code from Internet Explorer 9.0 All in one line

Hi,

when I copy the code from SyntaxHighlighter on Internet Explorer 9.0 (and maybe in earlier versions too) and I paste the code in a editor like notepad or notepad++, I see the code all in one line, for example this is the code:

<ul>
     <li>Example</li>
     <li>Example</li>
     <li>Example</li>
</ul>

And this is what I see in notepad++ after copy paste from IE 9.0:
<ul> <li>Example</li> <li>Example</li> <li>Example</li> </ul>

html not displaying

seems to strip html tag. latest version 3.0.3.

brush: php; html-script: true;

and are both stripped

Support for different colors when highlighting

At current you can highlight several lines and you can specify which colour you want to use, but you cannot have different colours for different lines.

It would be very helpful to add support for this.

Feature Request - Inline hilighting

I'd like to be able to write inline code and have it highlighted.

I use this feature most commonly with names of structures and small expressions (class names, lambdas, or Linq expressions in particular - I'm a C# guy).

Something similar to the result of the `` tags on Stack Overflow, though having real coloring would be great. I'm fine with larger syntax, and having to specify the language I'm using, as long as I can put the snippet inline.

Code Colorer has such a feature, though it doesn't do highlighting - it just makes a grey background.

XML nested instead of repeated

I'm using SyntaxHighlighter to mark up XML. It works great, but some XML shows nested:

<hardwareitemcapability capability="SuppAdsl1A" value="true">
<hardwareitemcapability capability="SuppAdsl1B" value="false">
<hardwareitemcapability capability="SuppAdsl2A" value="true">
<hardwareitemcapability capability="SuppAdsl2B" value="false">
<hardwareitemcapability capability="SuppAdsl2OnIsam" value="true">
<hardwareitemcapability capability="SuppAdslOnBr" value="true">
<hardwareitemcapability capability="SuppTvBriding1p" value="false">
<hardwareitemcapability capability="SuppTvBriding2p" value="false">
<hardwareitemcapability capability="SuppVdsl2" value="false">
</hardwareitemcapability></hardwareitemcapability></hardwareitemcapability></hardwareitemcapability></hardwareitemcapability></hardwareitemcapability></hardwareitemcapability></hardwareitemcapability></hardwareitemcapability></capabilities>

Instead of:

<HardwareItemCapability Value="true" Capability="SuppAdsl1A"></HardwareItemCapability>
<HardwareItemCapability Value="false" Capability="SuppAdsl1B"></HardwareItemCapability>
<HardwareItemCapability Value="true" Capability="SuppAdsl2A"></HardwareItemCapability>
<HardwareItemCapability Value="false" Capability="SuppAdsl2B"></HardwareItemCapability>
<HardwareItemCapability Value="true" Capability="SuppAdsl2OnIsam"></HardwareItemCapability>
<HardwareItemCapability Value="true" Capability="SuppAdslOnBr"></HardwareItemCapability>
<HardwareItemCapability Value="false" Capability="SuppTvBriding1p"></HardwareItemCapability>
<HardwareItemCapability Value="false" Capability="SuppTvBriding2p"></HardwareItemCapability>
<HardwareItemCapability Value="false" Capability="SuppVdsl2"></HardwareItemCapability>

I'll try to attach an example to this issue. If I can assist in solving it, let me know!

GPL? LGPL?

SyntaxHighlighter license notation is a mixture of GPL and LGPL.

  1. "You may use any SyntaxHighlighter project under the terms of eigher the MIT License or the GNU General Public License(GPL) Version 3."

However, "GPL" is linked to the LGPL.
http://alexgorbatchev.com/SyntaxHighlighter/about.html

  1. distribute the LGPL in github.
    https://github.com/alexgorbatchev/SyntaxHighlighter/blob/master/LGPL-LICENSE

  2. The source code has been described as the GPL license.
    "Dual licensed under the MIT and GPL licenses."
    https://github.com/alexgorbatchev/SyntaxHighlighter/blob/master/build/includes/header.txt

LGPL and GPL are different.
I think you should be consistent with LGPL.

For example,

  1. http://alexgorbatchev.com/SyntaxHighlighter/about.html

"You may use any SyntaxHighlighter project under the terms of either the MIT License or the GNU General Public License (GPL) Version 3."
to
"You may use any SyntaxHighlighter project under the terms of either the MIT License or the GNU Lesser General Public License (LGPL) Version 3."

  1. https://github.com/alexgorbatchev/SyntaxHighlighter/blob/master/build/includes/header.txt
  • @ License
  • Dual licensed under the MIT and GPL licenses.
    to
  • @ License
  • Dual licensed under the MIT or LGPL licenses.

SyntaxHighlighter is great software, and I want to use.
However, my company is strictly a software license, and I can not use the ambiguous notation software license.

Would you correct representation of the license?

copy, print, raw code

previous versions were using swf, and now you removed them.

those features were awesome and i request you to implement them without flash :)

Feature request: make brush case-insensitive

At the moment, brush is case-sensitive - so you have to declare "brush: php" instead "brush: PHP", the proper name of the language, or "brush: java" instead of "brush: Java", for example.

It has led a lot of users to get confused about why it doesn't work - note: we're an educational institution, so they're almost-programmers, not actual programmers, who might be more aware of following instructions to the letter and the importance of case :)

Would it be a huge deal to make the brush case-insensitive? It would be a huge feature from a usability standpoint.

Great plugin, by the way, and thanks :)

two-digit numbers disappear

When i use SyntaxHighlighter 3.0.83 on pre-elements where the only content is a two-digit number, the output is a single &nbsp; and nothing else. One or three digits works just fine, but not two digits. I thought it was a brush problem (using JScript brush), but get the same behavior with the plain brush.

Example HTML:
<pre class="programlisting brush: javascript">42</pre>

Settings in use:
SyntaxHighlighter.defaults['tab-size'] = 4;
SyntaxHighlighter.defaults['gutter'] = false;
SyntaxHighlighter.defaults['toolbar'] = false;

This is the generated HTML:
<div class="syntaxhighlighter nogutter javascript" id="highlighter_441860"><table cellspacing="0" cellpadding="0" border="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2">&nbsp;</div></div></td></tr></tbody></table></div>

"?"icon can not auto move

when the codes are long,and you move the scroll bar ,the "?"icon in the codes and can not auto move.
my used version is 3.0.83

hyperlinks should include hash

I really like the fact that the highlighter turns urls that are in the highlighted code into hyperlinks. However, the majority of the urls that I include in code examples are to specific locations in the page. Currently the hash is not included in the hyperlink and therefore the links don't take users to where I intend.

Cann't collapse once again

I've tried several wordpress syntax-highlighting plugins based on SyntaxHighlighter, like WP SyntaxHighlighter etc.
They have a common issue that once the code block expands, it cann't collapse once again.
I found a code-hacking way, reffering http://www.nextpoint.se/?p=126. But it only worked on an old version of SyntaxHighlighter.
Is there a solution for this problem?

Copy and raw icons in self-host

Hi alex
in your current version of SyntaxHighlighter which you host for the blogs. We have a problem. I am using Blogger and the Copy and raw icons are no show and we have just "?" icon.
Do you remove this feature or we're missing something?

add esac to shBrushBash.js

In Bash, esac is used to end a case block, just like fi ends if block. esac should be in the keywords list too.

conflict with AMD loaders like RequireJS

since SyntaxHighlighter have a check at the top of each brush file:

typeof(require) != 'undefined' ? SyntaxHighlighter = require('shCore').SyntaxHighlighter : null;

it breaks compatibility with AMD modules since require is also available if an AMD loader is available on the page.

the proper check would be:

SyntaxHighlighter = SyntaxHighlighter || (typeof require !== 'undefined'? require('shCore').SyntaxHighlighter : null);

Missing XRegExp

According the the documentation you don't need to include xregexp.js. In the big file demo there is a comment that it should already be included in the final, but it seems to be missing.

Manually including the xregexp.js does work. So either the build or the documentation seems to be wrong.

HREF auto-encoding

Hi - I'm using this with the PHP brush
When it parses my php, it automatically converts anything inside the double quotes of a href="" with the url encoded version.

While this could be considered useful for most, I would like to disable this. I've tried locating the code causing it and stopping it but to no avail. The page its screwing up is this one
http://www.jaygilford.com/php/completely-customisable-php-pagination-class/
Here's a screenshot of the issue
http://screencast.com/t/OJRu6TwzS

Please can someone help me fix this?

Thanks
Jay

Tabwidth should be configurable

Currently, the tabwidth is set to 4 spaces. Ideally, this would be configurable. It is possible to get around this by using spaces, rather than tabs, in the code itself, but this is tedious and annoying. :)

Code Autocorrection

In the [vb] environment, if I use

8)

it is transformed to:

< img src="http://nerdjacking.de/wp-includes/images/smilies/icon_cool.gif" alt="8)" class="wp-smiley" >

in the frontend ("view source" also). (which is this smiley 8))

Wordpress HTML-Editor is used for editing.





Screenshot Back-End (see line 5)
______________________________

Image Hosted by ImageShack.us
______________________________





Screenshot Front-End (see line 34)
______________________________

Image Hosted by ImageShack.us
______________________________

Toolbar in V3

Hello Alex,
Thank you really for this nice code and application, hope you all success.

this is the first time trying to use it, after long search on google about how to display the toolbar, I found on your site
it is removed.

Is it possible to display the same toolbar as in V2 for copy/source/print etc icons.
This is a very important feature do not know why you removed it. The new copy method does not work well on all
code area's and also how the regular user will know how to do that unless you post information above each code
block "Double click inside the code to select".
Thank you

Pre class

Hi,
How does this Pre class thing work? I'm creating a mini-pastebin and so far i got this part:

<script type="text/javascript" src="js/'.$row["lang"].'.js"></script>

So it finds the right language.js file, but how about the pre class, how can i make that auto? I'm not quite understanding this page: http://alexgorbatchev.com/SyntaxHighlighter/manual/api/autoloader.html I'm afraid.

Regarding small screens

Hi — thanks for all your work on this, it seems to be one of the best syntax highlighters out there.

Question: Have you given any thought to small screens? Just wondering if you (or anyone) has worked on any media-query-based alternative presentations for the script.

Thanks!

add an ability to show the source name

may be like this

<pre class="brush: cpp; name: 'test.cpp'>...</pre>

test.cpp
...................................
...................................
...................................

XML brush for HTML highlights wrong elements

I've tried using the xml brush, and other brushes with html script set to true, but nothing seems to work properly. Both the less than, greater than, forward slash, and contents of any tag, are assigned the class "plain". The equals sign is alright when colored as plain, but the rest makes it look horrible.Is there a way to adjust the xml brush to work in this way?

Python string highlighting bug

Everything between two sequences of '"' (single quote, double quote, single quote) is highlighted as a string.

a = '"' # single/double/single quote

everything between a and c is highlighted as a string

c = '"' # single/double/single quote

This only happens when there are 2 '"' sequences. If one of those sequences uses '"' or inserts spaces ' " " the code between them is not highlighted as a string.

Entities are passed as-is to brushes

Hello,

When you have code with entities, like &, the brush receives & instead of just. In the case of Clojure it breaks because the ; at the end of it matches starting a comment, so we end up with &;, with the ; highligted as comment. I found a workaround but I think this is a bug, right? I'll post a link to the workaround once it's public.

In Chrome at least, even if the code just has a single ampersand: &, the brush ends up receiving the entity &.

PHP built-in functions that are / aren't highlighted

Is there any particular rhyme or reason to the PHP built-in functions that are / aren't included in the highlighting? I see that it's based on a list, and I've noticed several that aren't included, such as define(), constant(), ob_start(), ob_get_clean().

Can't Get it to work at all on blogger.

This is what I have:

<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js" type="text/javascript">
</script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js" type="text/javascript">
</script>
<link href="http://alexgorbatchev.com/pub/sh/current/styles/shCore.css" rel="stylesheet" type="text/css"></link>
<link href="http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css" rel="stylesheet" type="text/css"></link>
 
<br />
<pre class="brush: js; bloggerMode: true;">function foo()
{
}
</pre>
<script type="text/javascript">
     SyntaxHighlighter.all()
</script>

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.