Add CSS for showing Source Code in blogger


If you want to have your blog on blogger, to show source code in a nice way.


  • Goto https://www.blogger.com/
  • Select Theme
  • Select Customize
  • Select Add CSS on dropdown under Advanced
  • Paste the following CSS
  • Now you can insert your code in <pre> </pre> tags in your posts. 


pre {
    background: #f4f4f4;
    border: 1px solid #ddd;
    border-left: 3px solid #f36d33;
    color: #666;
    page-break-inside: avoid;
    font-family: 'Source Code Pro', monospace;
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 1.6em;
    max-width: 100%;
    overflow: auto;
    padding: 1em 1.5em;
    display: block;
    word-wrap: break-word;
}

Comments

Post a Comment

Popular posts from this blog

Pimp your Gtk application with CSS

Image
  GTK is a powerful framework for building GUI application in Linux and other OSes. It is written in C, but there is binding for many programing languages like Python. GTK uses a subset of CSS for styling your application. I have made a little Python Demo Application to show how to pimp your application like a pimp. It shows the basics of how to use a CSS file with GTK python bindings and  the basics of how to write custom styling in CSS for your GTK application.  It is not meant to be good looking 😊, but to show how the styling works. It shows the basics like colors, padding, margins, borders etc, but also more advanced features like transitions and animations.
Read more

Yum Extender is very keyboard friendly

   It has been a design goal to make Yum Extender NextGen very keyboard friendly, not just having keyboard shortcuts, but also have a effective workflow. Fedora packages https://copr.fedorainfracloud.org/coprs/timlau/yumex-ng/ Development site https://github.com/timlau/yumex-ng
Read more