Wiki

Clone wiki

SyntaxHighlighter / Home

Welcome

  • Allows the use of the "data-sh" HTLML5 (although backwards compatible) attribute to be used to set SH options. This avoids classname pollution. See example.
  • Allows the use to use for multiple element types. By default set to ["code","pre"]. See example.
  • Fixed autoloading such that you can now autoload before the dom is ready, and calling all() will not fail if brushes are still loading - instead it will wait politely until the dom and autoloading brushes have finished.
  • Added autoloadAllBrushes(base_url) such that you no longer have to pass all the brushes to autoloader every darn time.
  • Fixed quotes in comments, such that they no longer overflow the comments and stuff up your syntax highlighting!
  • To include and use in your page use:
<!-- SyntaxHighlighter -->
<script type="text/javascript" src="https://bitbucket.org/balupton/syntaxhighlighter/raw/tip/build/output/scripts/shCore.js"></script>
<script type="text/javascript" src="https://bitbucket.org/balupton/syntaxhighlighter/raw/tip/build/output/scripts/shAutoloader.js"></script>
<link type="text/css" rel="stylesheet" href="https://bitbucket.org/balupton/syntaxhighlighter/raw/tip/build/output/styles/shCore.css"/>
<link type="text/css" rel="Stylesheet" href="https://bitbucket.org/balupton/syntaxhighlighter/raw/tip/build/output/styles/shThemeDefault.css" />
<script type="text/javascript">/*<![CDATA[*/
	SyntaxHighlighter.defaults['gutter'] = true;
	SyntaxHighlighter.defaults['toolbar'] = false;
	SyntaxHighlighter.autoloadAllBrushes('https://bitbucket.org/balupton/syntaxhighlighter/raw/tip/build/output');
	SyntaxHighlighter.all();
/*]]>*/</script>
  • Then insert your code block like so: (the example)
<code class="language-html" data-sh='{"gutter":true}'>
	&lt;code class="language-html" data-sh='{"gutter":true}'&gt;
		&lt;p&gt;This is some HTML code, with the gutter.&lt;/p&gt;
	&lt;/code&gt;
</code>

<code class="language-html" data-sh='{"gutter":false}'>
	&lt;code class="language-html" data-sh='{"gutter":false}'&gt;
		&lt;p&gt;This is some HTML code, without the gutter.&lt;/p&gt;
	&lt;/code&gt;
</code>

Updated