How to insert code blocks in Blogger posts;code snippets blogspot;code snippets blogger;How to display code snippets in blogger posts;vba code display in blogger
1) First, we need to add the html code(syntax template) below on the head section of our blogger post.<head>
<link href="https://alexgorbatchev.com/pub/sh/current/styles/shCore.css" rel="stylesheet" type="text/css"></link>
<link href="https://alexgorbatchev.com/pub/sh/current/styles/shThemeEclipse.css" rel="stylesheet" type="text/css"></link>
<script src="https://alexgorbatchev.com/pub/sh/current/scripts/shCore.js" type="text/javascript">
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/>
<script language='javascript' type='text/javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.all();
</script>
</head>
2) Next step is the code rendering. Basically, we need to HTML escape some characters like right angle brackets, e.g. all < must be replaced with <. To do so, you can use the following online tool: http://codeformatter.blogspot.in/2009/06/about-code-formatter.html
3) Once you have the code with escaped characters, you can copy it on your blogger post inside
<pre> tags. 3) That's it! the complete example is below:4) Another handy online converter of code to html is hilite.me. Convert the piece of code which is desirable to insert as a code block using this converter and paste the html in the post.<head> <link href="https://alexgorbatchev.com/pub/sh/current/styles/shCore.css" rel="stylesheet" type="text/css"></link> <link href="https://alexgorbatchev.com/pub/sh/current/styles/shThemeEclipse.css" rel="stylesheet" type="text/css"></link> <script src="https://alexgorbatchev.com/pub/sh/current/scripts/shCore.js" type="text/javascript"> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'/> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/> <script language='javascript' type='text/javascript'> SyntaxHighlighter.config.bloggerMode = true; SyntaxHighlighter.all(); </script> </head>
Let’s say we have the following piece of code which is desirable to insert as a code block:
Function OdbcConnectionStringSQLServer(ByVal Driver As String, ByVal Server As String, ByVal database As String, _
ByVal Username As String, ByVal Password As String) As String
'SQL Server
OdbcConnectionStringSQLServer = "Driver={" & Driver & "};Server=" & Server _
& ";UID=" & Username & ";PWD=" & Password & ";Database=" & database
End Function
Below is the result after conversion. style I used: friendly, CSS I used: border:none;
Function OdbcConnectionStringSQLServer(ByVal Driver As String, ByVal Server As String, ByVal database As String, _ ByVal Username As String, ByVal Password As String) As String 'SQL Server OdbcConnectionStringSQLServer = "Driver={" & Driver & "};Server=" & Server _ & ";UID=" & Username & ";PWD=" & Password & ";Database=" & database End Function
No comments:
Post a Comment