Thursday, March 5, 2015

Changes 3/5/15 - Blogger CSS and Code Highlighting

So today is a snow day, but I was messing around with blogger and figured out how to set custom, blog-wide CSS classes. So now, if I have some code I'm referencing, and I don't want to pull it out into a Github gist, I can use my fancy new <span class='code'> tags instead of having the old <span style='font-style: monospace;'> that I've been using. Not only is span.code less typing for me, but I also made it much fancier.
span.code {
  font-family: monospace;
  color: rgb(234, 85, 31);
  border-radius: 1px;
  background-color: rgb(239, 239, 239);
}
I also made a CSS <pre> class (as you can see above!), but I probably won't be using it as much because most of my longer code blocks will be put into gists. Thanks, Github! Even though your css syntax highlighting is kind of ugly.

I was able to do this in the Blogger menu. I went to Template > Customize > Advanced > Add CSS.

Actually, I probably should have just gone there first, but I checked out Sam's blog, and he's using <code> tags, which would be even less typing than <span style='code'>!  I didn't even know that tag existed, and it looks like it's default style is to set the font-family to monospace.  So I've been typing out <span style='font-family: monospace;'> all this time for no reason.

1 comment:

  1. Wonderful! As so often happens in your posts, I was thinking "I hope Alex tells me *how* he added custom CSS to his blog", and sure enough, a bit further down in the post, you did ;-)

    ReplyDelete