Adding Code Snippet in Blogger Post
Adding Code Snippets in Blogger Post ? My blogs mostly consist of code in it so how to add those lines of code in my blogs is important. When I started writing blogs on node.js, mysql I share those pieces of code in my blogs. I tried some of the techniques which can help you as well.When you write blogs on any programming language you always want it to look the same as that in your editor with proper format and color. Code sharing should be easy for others to copy, because when users search google for a solution they want a quick and easy way to copy and try your solution. When your users look at your article code it should appear in the correct format.
Listed some of the ways to add code snippet or examples in your blogs,
Example : suppose you want to display below code in your blog, which is not easily readable .
const express = require('express');
const app = express();
const port = 3000;
app.get('/', (req, res) => res.send('Hello World!'));
app.listen(port, () => console.log(`Example app listening at http://localhost:${port}`));
Block Codes,
You can include code examples in your HTML by using the <code> tag. This automatically uses a monospaced font and also semantically labels our code as what it is.
Here is the case for HTML page,
<pre style="background-color: #eeeeee; border: 1px solid #999; display: block; overflow-x: scroll; overflow-y: hidden; padding: 20px;">
<code>
const express = require('express');
const app = express();
const port = 3000;
app.get('/', (req, res) => res.send('Hello World!'));
app.listen(port, () => console.log(`Example app listening at http://localhost:${port}`));
</code>
</pre>
I used the <code> tag for our actual code and <pre> tag to display the white space. This makes our code properly spaced.
For Styling code use, style="background-color: #eeeeee; border: 1px solid #999; display: block; overflow-x: scroll; overflow-y: hidden; padding: 20px;"
Output,
planetB Syntax highlight code.
To get a nice syntax-highlighted code. Copy and paste your code in the text provided in their site, then select the language on submit it will generate the highlighted text with color and format.Output,
- const express = require('express');
- const app = express();
- const port = 3000;
- app.get('/', (req, res) => res.send('Hello World!'));
- app.listen(port, () => console.log(`Example app listening at http://localhost:${port}`));
Code Blocks Add-ons for Google Doc.
Syntax highlighting for Google DocsCode Blocks makes it easy to put your code into Google Docs. Simply select some text, click the "Format" button, and it will be formatted with the color theme of your choice.Features:• One-click syntax highlighting• Automatic language detection (or choose it yourself)• Lots of color themes• Format code inline or as blocks (1x1 tables)• Preview changes before updating your document. Copy the formatted text into your blog and past it will look the same.
NOTE: Code Blocks does not provide real-time syntax highlighting or code formatting. To get these features, you will need to use a separate editor.
Output,
If you don't want to download any additional software, highlighter there's an easy way to get what we need. It generates output in different styles like a sunburst, twilight, Active4D, Blackboard, etc. you will love to use this. We can use both Html code generated by highlighter & preview code as well.
1)Here is the case for HTML page, copy html code from highlighter website.
<div style= border: 1px solid #999; display: block; overflow-x: scroll; overflow-y: hidden; padding: 20px;"> -- paste html code generated from highlighter</div>
Output,
 |
| Output : adding code snippet using Highlighter |
2)Here is the case for preview code, copy the code from preview code window from highlighter.
Output,
const express = require('express'); const app = express(); const port = 3000; app.get('/', (req, res) => res.send('Hello World!')); app.listen(port, () => console.log(`Example app listening at http://localhost:${port}`));
Pasting the code in your blog is much easier, isn't it? If it doesn't work as expected we have a solution for that as well.
1)open your google drive => create a doc => insert table 1*1 => paste the copied code from highlighter => right click on table => go to table properties => change the background color to black => select and copy the table => paste it in your article => done.
2)using textEditor, As I am on my mac and use “TextEdit” to write notes. Open “TextEdit” => paste the copied preview code from highlighter => if you want to change the background color then do it, else select all and copy => paste it in your article => done.
Hilite.me
converts your code snippets into pretty-printed HTML format, easily embeddable into blog posts, emails and websites.Just copy the source code to the left pane, select the language and the color scheme, and click "Highlight!". The HTML from the right pane can now be pasted to your blog or email, no external CSS or Javascript files are required.Output,
Step2: clip "+" on top right cornor.
Step3: provide a description, file name with extension and paste your code in code pannel.
 |
| Output : adding code snippet using github gist |
Step4: if you want to create secret gist, press secret gist which is visible to you and to whom you have shared it. secret gist is hidden from the search engine but visible to anyone you gave the URL.
Step5: click on embed gist, copy the script.
 |
Step6: paste the Github gist script in your Html. done, your code will automatically be turned to code in proper format and color. done.
Apart from this method of adding code snippet in blogs if you've got the other ways then please share.
Comments
Post a Comment