CustomMenu

Sunday, February 9, 2014

Blogger Code Formatting

Before I start posting code, I thought I'd outline how to display formatted code in blogger.  The following links were helpful in setting up code formatting in blogger:

The "brushes" and themes available are located here:

I also included the style additions outlined in the blog post below. I included the additions after the "link href" sections that included the css files for SyntaxHighLighter.
included in the blogger template...
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.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/shBrushCss.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPlain.js' type='text/javascript'></script>
<script type='text/javascript'>
    SyntaxHighlighter.config.bloggerMode = true;
    SyntaxHighlighter.defaults['auto-links'] = false;
    SyntaxHighlighter.defaults['tab-size'] = 2;
    SyntaxHighlighter.defaults['toolbar'] = false;
    SyntaxHighlighter.all();
</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>
<style>
    .syntaxhighlighter .line.alt2 {
    background-color: #f2f2f2 !important;
    }
    .syntaxhighlighter {
    background-color: white !important;
    border: 1px solid #DADAD9 !important;
    margin-bottom: 20px !important;
    }
    .syntaxhighlighter .line.highlighted.alt1, .syntaxhighlighter .line.highlighted.alt2 {
    background-color: #D4DDF8 !important;
    }
</style>
 
</head>

No comments:

Post a Comment