Month: May 2014

Created a few different size formats of the same image concept to be used in advertising Devil Music on the internet.

I hope you like them, because we sure do.

The fonts used are Cinzel Decorative by Natanael Gama [Google Font Here] (the same as was used for the novel’s title and author’s name on the book cover), You Murderer by Nate Piekos of Blambot (an amazing site), and good old Times New Roman.

Added support to this blog for syntax-highlighted code blocks in this blog using SyntaxHighlighter by Alex Gorbatchev.

I wanted to add properly formatted and syntax-highlighted code blocks to this blog, so I looked into what others were doing and what was considered best practice at this time. The best single article I read covering this topic was “How to Post Code To Your Blog and other Religious Arguments” by Scott Hanselman. Visually, my favorite code blocks were those formatted as though they were in Sublime Text (example #1, example #2). However, I could not figure out how to accomplish that without making the underlying material a mess; I suspect there is a tool for Jekyll or similar, which I’m not currently using and cannot easily take advantage of. As such, my choice is instead to use SyntaxHighlighter by Alex Gorbatchev. The SyntaxHighlighter source code is on GitHub and it keeps the underlying code intact inside a single <pre> tag. Also, Alex very kindly offers free public hosting of SyntaxHighlighter, which makes using it on Blogger much simpler (include <script src=””> tag calls instead of copy-pasting the source either into JavaScript widgets or the template itself).

The SyntaxHighlighter installation is as simple as one could hope, though you do need to edit the HTML of your Blogger template directly (Blogger > Template > Edit HTML). Just include the necessary files just before the </head> tag:

<!-- support for SyntaxHighlighter by alexgorbatchev.com -->
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/>

And then add a couple lines of JavaScript at the end of the template, just before the </body> tag:

<script language='javascript'>
    // support for SyntaxHighlighter by alexgorbatchev.com
    SyntaxHighlighter.config.bloggerMode = true;
    SyntaxHighlighter.all();
</script>

I also was not able to get the AutoLoader to work, so instead I’m explicitly including all of the code brushes I intend on using (out of the many default available brushes).

Using it is similarly straightforward. There is a demo. Used trivially, it is just content in a <pre> tag with a class=”brush: language”, but there are additional options if you care. The one caveat is that all right angle brackets must be HTML escaped (you must replace all “<” with “&lt;” in order to avoid it being interpreted improperly by browsers and other readers) (read the installation page).

Added a navigation bar to this blog, currently hosted on Blogger, as an HTML/JavaScript gadget (widget).

I looked around at how other people were adding navigation to their Blogger blogs and decided that I liked the HTML/CSS/JavaScript gadget method. For this specific navigation bar, I followed:

• http://www.avdhootblogger.com/2013/04/king-of-black-navigation-menu-bar.html
• http://red-team-design.com/css3-dropdown-menu/
• http://red-team-design.com/css3-animated-dropdown-menu/

Although I found that I also had to add some additional CSS to the theme customization in order to undo some of my current theme’s defaults.

.widget li {
    margin: 0px;
}