Search This Blog

Showing posts with label Blogger. Show all posts
Showing posts with label Blogger. Show all posts

Monday, November 12, 2018

Powershell: Post code to blogger from Visual Studio Code

Using the blogger web tool, have been able to paste from VSC to web tool and it will colour code.

Just need to jump to HTML view and change the style paramters of the div's from

 white-space: pre;

to

 white-space: pre-wrap;

which will allow for the code to wrap.


OLD: Notes for myself, as I forget by the time I write something new.Smile

Using Visual Studio Code to create Powershell code.

You can copy and paste to word and the formatting is maintained.

Save the file as an rtf file.

Use an rtf converter to convert to HTML. I use the MultiDOC Converter (freeware).

I then paste this HTML code into Windows Live Writer.

Note: If you go from the edit tab, then live writer will change the style class to lower case, and then they wont match the uppercase class names in the code.

So to publish just paste the style block into the code page, just prior to publish.

Reference:

http://www.multidoc-converter.com/en/index.html


Share/Bookmark

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)

http://openlivewriter.org/

There is the code plugin for wordpress

https://richhewlett.com/wlwsourcecodeplugin/

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”


Share/Bookmark