OK in my previous post towards the end I noticed a little config button on one of the plugins in Windows Live Writer. So the plug in I am referring to is Syntax Highlighter Version 1.0.9.0 from http://wlwplugins.com/syntax-highlighter-code-formatting-for-wlw.php. It is a cool plugin that allows me to paste in code, and it automatically formats it to each relevant language. What I noticed was the config option where you can define the surrounding html. So it got me thinking, and on the code project you can minimize the code if you want so you can read on easily and things. So that is what i did, made my own javascript which does just that, so every script I paste in simply gets this javascript appended to it. It is that easy.
Example: (I will use my new Pair class I have made and updated, blogged about this a few times today. hey... I like it lol <s>)
Hide Code [-] public class Pair<T, S>
{
private T m_first;
private S m_second;
public Pair(T first, S second)
{
m_first = first;
m_second = second;
}
public T First
{
get { return m_first; }
set { m_first = value; }
}
public S Second
{
get { return m_second; }
set { m_second = value; }
}
}
{..} Click Show Code
So as you can see, a little bit of CSS, and a tea spoon of DOM manipulation!
So first things first, go and download the plugin which I mentioned above. Then, once installed if you select it, and inside the dialogue box click config... Now simply enter the following script, and you will have exactly what I have done here. You can add, edit or delete anything you wish. The char codes are automatically done by Windows Live Writer, so apoligies for that. I have also noticed that it reorders and (trys) to standardize your css. Anyways here is the code I have made:
Hide Code [-]
<div style="font-size: 12px; margin: 10px; position: relative; width: 95%; border-bottom: #cccccc 1px solid">
<span style="width:100%;border-bottom: #cccccc 1px solid; display: block; text-align: right"><a style="color: #3366cc" onclick="if(this.parentNode.parentNode.getElementsByTagName('pre')[0].style.display==''){this.innerHTML = 'Show Code [+]';this.parentNode.parentNode.getElementsByTagName('pre')[0].style.display = 'none';this.parentNode.parentNode.getElementsByTagName('div')[0].style.display = '';}else{this.innerHTML = 'Hide Code [-]';this.parentNode.parentNode.getElementsByTagName('pre')[0].style.display = '';this.parentNode.parentNode.getElementsByTagName('div')[0].style.display = 'none';}return false;" href="#">Hide Code [-]</a></span>
<pre style="padding-bottom:30px;overflow-x: auto;overflow-y:hidden;">{highlighted_source_code}</pre>
<div style="background-color:#3366CC;display:none;color:#ffffff;font-weight:bold;">{..} Click Show Code</div>
</div>
{..} Click Show Code
Cheers,
Andrew