Customizing Blogger for a Technical Blog

Read on if you are interested to know this blog's layout and formatting.

Template

Go to Blog Settings > Template. Select one of Blogger's Dynamic View.
Unless you are an experienced web designer or developer, I recommend using one of the Dynamic views. The user interface and theme is well designed, and it works well on mobile view. I doubt if I can create a template that is as good as Blogger's from scratch.

Code Highlighting

I am using Google's Code Prettify to highlight code. On top of that, I use Yoshihide Jimbo's Atelier Dune Light theme to make the code section easier on the eyes. See the list of available themes here.



To add the Javascript and CSS source files, click on Edit HTML and add the following lines in the <head> section


    <script src="//cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
    <link href='//jmblog.github.io/color-themes-for-google-code-prettify/themes/atelier-dune-light.css' rel='stylesheet' type='text/css'/>


Here a sample code section


<pre class="prettyprint lang-sh"><code>
$ composer require peehaa/opcachegui:1.0.1 --sort-packages



</code></pre>

Which will appear like this


$ composer require peehaa/opcachegui:1.0.1 --sort-packages

The additional blank lines are needed so that the spacing at the beginning and end is the same. You can specify the language of the code.

Keyboard Commands


I like Stackoverflow's keyboard command style.

To have that, you will need to customize Blogger's CSS. In Template, click on Customize. Then click on Advanced and Add CSS. Add in the following lines:


kbd {
  padding: .1em .6em;
  border: 1px solid #ccc;
  font-size: 11px;
  font-family: Arial,Helvetica,sans-serif;
  background-color: #f7f7f7;
  color: #333;
  -moz-box-shadow: 0 1px 0 rgba(0,0,0,0.2),0 0 0 2px #fff inset;
  -webkit-box-shadow: 0 1px 0 rgba(0,0,0,0.2),0 0 0 2px #fff inset;
  box-shadow: 0 1px 0 rgba(0,0,0,0.2),0 0 0 2px #fff inset;
  border-radius: 3px;
  display: inline-block;
  margin: 0 .1em;
  text-shadow: 0 1px 0 #fff;
  line-height: 1.4;
  white-space: nowrap;
}

To highlight keystroke, go to HTML view of your blog post use the <kbd> tag


Press <kbd>Ctrl</kbd>-<kbd>C</kbd>

will appear as

Press Ctrl-C

Quotes

I find the default quote formatting in Blogger to be unimaginative, so I have customized it to appear this way

Always code as if the guy who ends up maintaining your code will be a violent psychopath who knows where you live - Martin Golding

To achieve that, edit the CSS and add in these lines:


blockquote {
  background: #f9f9f9;
  border-left: 10px solid #ccc;
  margin: 1.5em 10px;
  padding: 0.5em 10px;
  quotes: "\201C""\201D""\2018""\2019";
}
blockquote:before {
  color: #ccc;
  content: open-quote;
  font-size: 4em;
  line-height: 0.1em;
  margin-right: 0.25em;
  vertical-align: -0.4em;
}
blockquote p {
  display: inline;
}


Github style code formatting

I also like Github's style of code formatting:

$ git log --date-order --graph --tags --simplify-by-decoration --pretty=format:'%ai %h %d'



To have that formatting, customize your CSS with these lines:


.markdown-code {
  padding: 0;
  padding-top: 0.2em;
  padding-bottom: 0.2em;
  margin: 0;
  font-size: 85%;
  background-color: rgba(0,0,0,0.04);
  border-radius: 3px;
}

.markdown-code:before,
.markdown-code:after {
  letter-spacing: -0.2em;
  content: "\00a0";
}


at

No comments:

Post a Comment