Sunday, May 26, 2019

How to display code snippets in blogger posts

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:


 <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>  
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.

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