OBS! Numera använder jag Windows Live Writer och pluginprogrammet paste from Visual Studio för att publicera kod på bloggen. Syntaxhighlighter-scripten är borttagna och de kodexempel som publicerats så kommer helt enkelt visas i Courier New utan färgformatering av keywords etc. /Dan, 081211
Till denna blogg har jag valt SyntaxHighlighter för att skriva ut kod på ett läsvänligt sätt. Den fungerar som så att den kod jag vill visa upp på sidan omsluts med en pre-tagg där name="code"
och class sätts till ett alias för det "språk" jag vill använda. SyntaxHighlighter har redan stöd för språk som C#, CSS, SQL och XHTML och vill man kan man med lite regexp-erfarenheter ganska enkelt lägga till stöd för flera språk. När man väl implementerat SyntaxHighlighters-scriptet på sin sida kommer det att gå igenom alla pre-taggar med name="code" och modifera till det så att man får ett "kodfönster" enligt följande, här med exempel på hur pre-taggen för SyntaxHiglighter ska se ut:
<pre name="code" class="html">
Lite html-kod <b>här</b>.
</pre>
Några saker behöver dock fixas. Alla <-tecken måste ersättas med < och man bör göra detta även med &- och "-tecknen, dvs ersätta med & och ". För att slippa göra detta manuellt varje gång jag ska publicera lite kod bestämde jag mig för att göra en liten "widget"-lösning som fixar detta åt mig. Jag gjorde två html-sidor, den första bygger upp ett frameset som laddar in Blogger i en frame och min andra html-sida i en annan frame;
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>deap Blogger Editor</title>
</head>
<frameset cols="*,500">
<frame src="http://www.blogger.com" name="blogger">
<frame src="snippets.html" name="snippets">
</frameset>
</html>
Sidan snippets.html ser ut så här:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Snippets</title>
</head>
<body>
<input id="target" type="text" value=' target="_blank"' onclick="javascript:this.select();" readonly="readonly" />
<br /><br />
<textarea id="replacer" style="width:450px;height:400px;" wrap="off"></textarea>
<br />
<select id="language">
<option value="c#">C#</option>
<option value="css">CSS</option>
<option value="js">JavaScript</option>
<option value="sql">SQL</option>
<option value="xml">XML/HTML</option>
</select>
<input type="button" value='Fix tabs and replace &, < and "' onclick="javascript:doReplace();" />
</body>
<script type="text/javascript">
//<![CDATA[
//Funktionen doReplace infogas här.
//]]>
</script>
</html>
Vad har vi här då? Först ett litet sidospår; Först i bodyn kommer en text input med texten target="_blank"
. Den har jag lagt in för att jag lätt ska kunna fixa så att länkar jag lägger in i mina bloggposter ska öppnas i nytt fönster, det är tyvärr inte standard i bloggers redigerare. Textboxen fungerar precis som när man ska kopiera embed-kod från youtube genom attributet readonly och onclick-eventet som markerar all text så fort man klickar på textboxen. Tillbaka till SyntaxHighlighter. Efter detta kommer nämligen en textarea, en dropdownmeny och en knapp. I textarean klistrar jag in den kod jag vill publicera exakt så som jag har den i Visual Studio, därefter väljer jag språk i dropdownmenyn och klickar på knappen. Knappen triggar javascriptfunktionen som jag lagt in längst ner i sidan, koden kommer här:
function doReplace()
{
var outputString;
outputString = document.getElementById('replacer').value.replace(/\t/g, ' ');
outputString = outputString.replace(/&/g, '&');
outputString = outputString.replace(/\</g, '<');
outputString = outputString.replace(/"/g, '"');
var language = document.getElementById('language').value;
document.getElementById('replacer').value = '<pre name="code" class="' + language + '">\n' + outputString + '\n</pre>';
document.getElementById('replacer').select();
}
Funktionen plockar in värdet från textarean och ersättar tabbar med fyra mellanslag, <-tecknet med <, &-tecknet med & och "-tecknet med ". Dessutom infogar den pre-taggen som krävs för att SyntaxHiglighter ska visa koden på sitt fina vis och det språk jag valt i dropdownmenyn infogas som värde på class-attributet. Slutligen markeras all text i textarean med select()-kommandot och sen är det bara för mig att kopiera och klistra in i Bloggers textredigerare. Syntaxen för Javascripts replace-funktion ser kanske lite märklig ut men det visade sig vara så att första argumentet är en RegularExpression och det andra argumentet är den sträng man vill ersätta med. Jag är ingen expert på RegularExpression utan fick god hjälp av w3Schools när det gäller detta och kom fram till att själva uttrycket ska omges av /-tecken och om jag vill ersätta alla förekomster av nånting lägger jag till ett g för att det ska bli en "global search", annars ersätts bara första förekomsten. För <-tecknet var jag tvungen att lägga in en escape character \
då <-tecknet har andra betydelser i Regular Expressions. \t
står för tabb-tecknet. Min båda html-filer har jag än så länge på min hårddisk och snabblänken till blogger i min webbläsare går nu till framesetfilen istället så att varje gång jag ska blogga automatiskt får med dig detta funktionsfönster. Nån gång i framtiden kommer jag säkert flytta ut dessa filer på nätet så att jag kan använda funktionaliteten även när jag bloggar från en annan dator.
Skärmdump: 
Uppdatering: Har under kvällen studerat SyntaxHighlighter-koden lite mer och upptäcker att det är inbyggt att tabbar ersätts med mellanslag. Dock verkar det i mitt fall vara så att om jag sparar tabbar i Bloggers textredigerare så ersätter blogger dessa med ett mellanslag. Så min tabfix enligt ovan behövs ändå, i just detta fall. En annan bra grej jag upptäckte är att SyntaxHighlighter automatiskt tar bort onödig indentering, så om jag kopierar ut t.ex. en if-else-sats som kanske ligger i ett namespace, i en klass, i en metod så behöver jag inte "avindentera" det själv för att det ska se bra ut på bloggen.
No comments :
Post a Comment