Search This Blog

Tuesday, June 07, 2016

Creating Code block for blogger

Its great news that Live writer has ben made open source by Microsoft. Please see Open Live Writer (OLW)

There is the code plugin for wordpress

this has been updated to work with Open Live Writer. However I am still waiting on a plugin for blogger in OLW. So in the meantime my process is this.

  1. Open the code in notepad++, which does nice simple syntax highlighting.
  2. Use the nppExport plugin to export to html. (note: I could not get this to work to the clipboard I had to export to a file. A minor pain.
  3. Then grab the <style> section, this details the css and how the code will be formatted. Paste this into the html view of the blog post in OLW.
  4. The following CSS has been inserted into the blogger template. Defines a class to apply to the div containing the code and then a style to apply to pre tags within that div.

divCodeBlock {
  word-wrap: break-word;
  width: 95%;
  background: #ffffff;
  white-space: pre-line;
  border-top: black thin solid;
  border-right: black thin solid;
  border-bottom: black thin solid;
  border-left: black thin solid;
  padding-bottom: 2px;
  padding-top: 2px;
  padding-left: 2px;
  padding-right: 2px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1;

div.divCodeBlock pre {
  white-space: pre-wrap; /* Since CSS 2.1 */
  white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
  white-space: -pre-wrap; /* Opera 4-6 */
  white-space: -o-pre-wrap; /* Opera 7 */
  word-wrap: break-word; /* Internet Explorer 5.5+ */

  1. In source view in OLW insert the following div tag where you want to place your code block.
    <div class="divCodeBlock"> <pre></pre></div>
  2. Now grab the page content in notepad++, this will be within <div> tags in the <body>.  And place into the
    <div class="divCodeBlock"> <pre><content here></pre></div>

Publish and bang, “Bob's your auntie's live-in lover”


No comments:

Post a Comment