Zen Coding for the PowerShell console and ISE

8381892061_eb3babe76a_m
First of all let’s clarify what Zen Coding actually is. According to their website: Emmet (formerly known as Zen Coding) is …

… a web-developer’s toolkit that can greatly improve your HTML & CSS workflow.

But what does this have to do with PowerShell? At least I find myself quite often trying to convert PowerShell output into HTML or even using the text manipulation capabilities of PowerShell to dynamically construct some static web content. Yes, I hear you shouting already isn’t that why we have ConvertTo-HTML and Here-Strings (and here)? Granted that those can make the job already pretty easy (I would definitely recommend you to have a look into Creating HTML Reports in PowerShell if you haven’t yet), but there is still an even better way to (dynamically) generate static HTML pages from within PowerShell. Before looking into the implementation details let’s have a look at some examples on what zen coding looks like (considering we would have a PowerShell function called zenCode that expands zen code expressions):

zenCode 'html:5'
<# output:
<!DOCTYPE html []>
<html lang="en">
	<head>
		<title></title>
		<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
	</head>
	<body></body>
</html>
#>
zencode 'ul.generic-list>(li.item>lorem10)*4'
<# output:
<ul class="generic-list">
	<li class="item">Sapien elit in malesuada semper mi, id sollicitudin urna fermentum.</li>
	<li class="item">Sapien elit in malesuada semper mi, id sollicitudin urna fermentum.</li>
	<li class="item">Sapien elit in malesuada semper mi, id sollicitudin urna fermentum.</li>
	<li class="item">Sapien elit in malesuada semper mi, id sollicitudin urna fermentum.</li>
</ul>
#>
zencode 'div+div>p>span+em^bq'
<# output:
<div></div>
<div>
	<p>
		<span></span>
		<em></em>
	</p>
	<blockquote></blockquote>
</div>
#>
zencode 'html>head>title+body>table>tr>th{name}+th{ID}^(tr>(td>lorem2)*3)*2'
<# output:
<html>
	<head>
		<title></title>
		<body>
			<table>
				<tr>
					<th>name</th>
					<th>ID</th>
				</tr>
				<tr>
					<td>Dolor sit.</td>
					<td>Dolor sit.</td>
					<td>Dolor sit.</td>
				</tr>
				<tr>
					<td>Dolor sit.</td>
					<td>Dolor sit.</td>
					<td>Dolor sit.</td>
				</tr>
			</table>
		</body>
	</head>
</html>
#>

You can have a look at the Zen Coding Cheat Sheet for more examples The syntax might look a bit cryptic at the first glance but once you get the hang of it it’s pretty easy. While this is all already pretty cool I wanted a way to combine this with the PowerShell pipeline in order to do things like that:

zenCode 'ul>li.item{$_}'
<# output
<ul>
	<li class="item">5</li>
	<li class="item">4</li>
	<li class="item">3</li>
	<li class="item">2</li>
	<li class="item">1</li>
</ul>
#>
gps | zenCode 'html>head>title+body>table>tr>th{name}+th{ID}^(tr>td{$_.name}+td{$_.id})'
<# output (excerpt):
<html>
	<head>
		<title></title>
		<body>
			<table>
                                <tr>
					<td>conhost</td>
					<td>14956</td>
				</tr>
				<tr>
					<td>csrss</td>
					<td>600</td>
				</tr>
#>
gps | select -first 10 | zenCode 'html>head>title+body>table[border=1]>(tr>td{$_.Name}+td{$_.ID})+td{$_.Modules | select -first 10}'
<# output (excerpt):
<head>
		<title></title>
		<body>
			<table border="1">
				<tr>
					<th>Name</th>
					<th>ID</th>
					<th>Modules</th>
				</tr>
				<tr>
					<td>iexplore</td>
					<td>8048</td>
					<td></td>
				</tr>
				<tr>
					<td>iexplore</td>
					<td>8488</td>
					<td>
						<table>
							<tr>
								<th>pstypenames</th>
								<th>BaseAddress</th>
								<th>Container</th>
								<th>EntryPointAddress</th>
								<th>FileName</th>
								<th>FileVersionInfo</th>
								<th>ModuleMemorySize</th>
								<th>ModuleName</th>
								<th>Site</th>
								<th>Company</th>
								<th>Description</th>
								<th>FileVersion</th>
								<th>Product</th>
								<th>ProductVersion</th>
								<th>Size</th>
							</tr>
							<tr>
								<td>
									<table>
										<tr>
											<td>System.Diagnostics.ProcessModule</td>
										</tr>
										<tr>
											<td>System.ComponentModel.Component</td>
										</tr>
										<tr>
											<td>System.MarshalByRefObject</td>
										</tr>
										<tr>
											<td>System.Object</td>
										</tr>
									</table>
								</td>
								<td>18612224</td>
								<td></td>
								<td>18619984</td>
								<td>C:\Program Files (x86)\Internet Explorer\IEXPLORE.EXE</td>
								<td>File:             C:\Program Files (x86)\Internet Explorer\IEXPLORE.EXE
InternalName:     iexplore
OriginalFilename: IEXPLORE.EXE.MUI
FileVersion:      11.00.9600.16428 (winblue_gdr.131013-1700)
FileDescription:  Internet Explorer
#>

The solution to make this happen relies on the zencoding implementation Mad Kristensen has developed (https://github.com/madskristensen/zencoding) which he has also part made part of his awesome Web Essentials Visual Studio extension.
I’ve made a PowerShell function (Get-ZenCode alias zenCode) and also an ISE Add-on that expand Zen Code expressions and also work with the PowerShell pipeline. Get-ZenCode also supports output to a file (outPath parameter) and showing the result in the default browser (-Show Switch). I’m posting the source code for Get-ZenCode below but you can also download the same including full help and more examples from my GitHub page (the function requires the zenCoding.dll within a resources subfolder) . The ISE Add-On (including Get-ZenCode) is part of my ISEUtils Add-On. With the Add-On the expressions can be typed into the Editor (without the preceding zenCode call) and expanded by pressing CTRL+SHIFT+J (or the respective menu entry):
ExpandZenCode

How do you like Zen Coding?

shareThoughts


Photo Credit: jurvetson via Compfight cc

Advertisements

2 thoughts on “Zen Coding for the PowerShell console and ISE

I'd love to hear what you think

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s