Beautify HTML output from ConvertTo-HTML

Quick one to write down before I forget it again, and have to search the interwebs again:

Whenever you use ConvertTo-Html, the output is usually.. meh. However, you can add some CSS styling and include it in the converting process:

$Header = @"

<style>

Body{background-color:white;font-family:Arial;font-size:10pt;}

Table{border-width: 1px; border-style: solid; border-color: black; border-collapse: collapse;}

TH{border-width: 1px; padding: 2px; border-style: solid; border-color: black; background-color: #cccccc;}

TD{border-width: 1px; padding: 5px; border-style: solid; border-color: black; background-color: white;}

</style>

"@

Get-Process | ConvertTo-Html -Head $Header | Out-File C:\temp\process.htm

Which gives a little more oomph to your HTML output:



You can also put the CSS code in a separate file (e,g, D:\table.css), and include the CSS with

ConvertTo-Html -CssUri "D:\table.css"

Adding PowerShell code in blog posts

For a while I was adding Powershell code in this blog, and it didn't look as neat as all the other blogs I was visiting, so I looked around, and of course I could have been beautifying my blog for a long long time:

LazyWinAdmin: Blogger - Adding PowerShell code in your blog post...

I looked at the code that LazyWinAdmin provided, but that did not work as well as the Falchion plugin from here. 

Now I can type something in the ISE, select the code and do "CTRL+Shift+C" and it then runs a Powershell script which generates the HTML code which I can paste into the Blogger site. I may eventually create a Github account and publish Powershell code through that, but this is a little bit simpler for now.

That left me with the Powershell window output, which LazyWinAdmin gave CSS code for that you can insert into the custom code for the template of your Blogger site:

CSS Code

.PoshConsole {
  color: #EEEDF0;
  background-color: #012456;
  font-family: consolas;
  font-size: 0.99em;
  padding: .25em;
  padding-top: 0.25em;
  padding-right: 0.25em;
  padding-bottom: 0.25em;
  padding-left: 0.25em;
}

Which can then be used with adding <pre class="PoshConsole">Something</pre> in the HTML editor.

One thing I did notice, is that my black background and gray text did not work so well with all of this beautification, that's why I moved to a more light template.

I noticed some other CSS style sheets in the sourcecode of the LazyWinAdmin page to make different types of styles, but I will let people hunt around for that themselves. He didn't put that in his blogpost, so I'm not sure if he wants the world to see that ;)