№1
<link href='http://yandex.st/highlightjs/6.1/styles/sunburst.css' rel='stylesheet'/>
<script src='http://yandex.st/highlightjs/6.1/highlight.min.js' type='text/javascript'/>
<script type="'text/javascript'">
hljs.initHighlightingOnLoad();
</script>
sample:
<pre>
<code>
@requires_authorization
def somefunc(param1, param2):
r'''A docstring'''
if param1 > param2: # interesting
print 'Gre\'ater'
print ''
return (param2 - param1 + 1) or None
class SomeClass:
pass
</code>
</pre>
№2
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeRDark.css' rel='stylesheet' type='text/css'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'></script>
<script language="javascript" type="text/javascript">
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.all();
</script>
N4
1) Go to Blogger's Design>Edit Html page.
2) In the <head> section, include the style sheets and related scripts.
<link href='http://alexgorbatchev.com/pub/sh/<version>/styles/shCore.css' rel='stylesheet' type='text/css'/> <link href='http://alexgorbatchev.com/pub/sh/<version>/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/> <script src='http://alexgorbatchev.com/pub/sh/<version>/scripts/shCore.js' type='text/javascript'></script> <script src='http://alexgorbatchev.com/pub/sh/<version>/scripts/shAutoloader.js' type='text/javascript'></script> |
3) Right before </body>, add this snippet so that autoloader works.
<script language='javascript' type='text/javascript'>function path() { var args = arguments, result = []; for(var i = 0; i < args.length; i++) return result};SyntaxHighlighter.autoloader.apply(null, path( 'applescript @shBrushAppleScript.js', 'actionscript3 as3 @shBrushAS3.js', 'bash shell @shBrushBash.js', 'coldfusion cf @shBrushColdFusion.js', 'cpp c @shBrushCpp.js', 'c# c-sharp csharp @shBrushCSharp.js', 'css @shBrushCss.js', 'delphi pascal @shBrushDelphi.js', 'diff patch pas @shBrushDiff.js', 'erl erlang @shBrushErlang.js', 'groovy @shBrushGroovy.js', 'java @shBrushJava.js', 'jfx javafx @shBrushJavaFX.js', 'js jscript javascript @shBrushJScript.js', 'perl pl @shBrushPerl.js', 'php @shBrushPhp.js', 'text plain @shBrushPlain.js', 'ps powershell @shBrushPowerShell.js', 'py python @shBrushPython.js', 'ruby rails ror rb @shBrushRuby.js', 'sass scss @shBrushSass.js', 'scala @shBrushScala.js', 'sql @shBrushSql.js', 'vb vbnet @shBrushVb.js', 'xml xhtml xslt html @shBrushXml.js')); SyntaxHighlighter.config.bloggerMode = true; SyntaxHighlighter.all();</script> |
4) Start adding code snippets with <pre> tags. Example:-
<pre class="brush: js">alert('This is an example!');</pre> |
5) The result of the above code would be:-
alert('This is an example!'); |
That's it! You should now have syntax highlighting in your blog ;-)

Комментарии
Отправить комментарий