Protect post from copy paste
Friends keep asking me how to protect their blog posts from being copied.
As you can see I have no protection for my blogs because I think that the effort is futile. I'v seen posts of mine plainly copied in other blogs. In some cases they give a reference to my blog, and for those I am really happy.
In other cases they have no reference even though they just copied and pasted without any work of their own.
Still, my friends want to restrict copy-paste, so I prepared a list of the available solutions:
As you can see I have no protection for my blogs because I think that the effort is futile. I'v seen posts of mine plainly copied in other blogs. In some cases they give a reference to my blog, and for those I am really happy.
In other cases they have no reference even though they just copied and pasted without any work of their own.
Still, my friends want to restrict copy-paste, so I prepared a list of the available solutions:
Database Version Control
There are two types of projects I am involved in these days.
Usually when a database is upgraded, a new version of the application is issued. If only one application is using the database then application-database sync is easy.
When multiple applications are using the same database then this problem is quite difficult to solve.
This is my solution to database versioning problem:
- Custom enterprise applications where we design the database and manage it.
- Web applications, that we host, where each customer has his own copy of the database.
- Developer databases
- Test database (both internal and customer)
- Production database
Usually when a database is upgraded, a new version of the application is issued. If only one application is using the database then application-database sync is easy.
When multiple applications are using the same database then this problem is quite difficult to solve.
This is my solution to database versioning problem:
SVG Javascript with events
I need a widget displaying the months of the year. I implemented using SVG and not by Canvas because I needed the capability of SVG to assign events to any element of the picture.
- The user should be able to select a month by clicking on it
- The widget should give an event for every month change
- The user should be able to deselect a month by clicking on it or at the center of the wheel.
sqlite c# wrapper usage
I wanted to use sqlite from C# and I created a wrapper. The wrapper was published in the previous post:Sqlite c# wrapper.
I found some nice projects doing almost the same thing but I wanted to be able to use the latest version of sqlite just as it comes out of the pipeline.
I hate it when I have to wait for months for the latest version to be ported to the environment I use for development.
I found some nice projects doing almost the same thing but I wanted to be able to use the latest version of sqlite just as it comes out of the pipeline.
I hate it when I have to wait for months for the latest version to be ported to the environment I use for development.
sqlite c# wrapper
Here are the classes to include in your C# project, so that you can use sqlite.
The classes should work without problem with sqlite version 3.7.4 2010-12-08.
If you find any problem you can mail me at moc.liamg@oirakp (do not copy paste, it is written rtl and set ltr by CSS) or you can leave a message. I you need a feature, that I did not implement, you can tell me, but no promises here.
The usage of the classes is covered in the next post: Sqlite c# usage.
If you find any problem you can mail me at moc.liamg@oirakp (do not copy paste, it is written rtl and set ltr by CSS) or you can leave a message. I you need a feature, that I did not implement, you can tell me, but no promises here.
The usage of the classes is covered in the next post: Sqlite c# usage.
Div based Infobox with CSS3
html:
<div class="infobox" ><div class="head">Titlos</div ><div class="body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ut mi imperdiet nibh laoreet porta at ut felis. Etiam cursus diam a justo lobortis congue. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce ac pellentesque eros. Aenean porta sem id lectus cursus luctus. Maecenas sagittis augue non enim laoreet congue. Maecenas pretium varius nulla non molestie. </div></div>
Javascript event handling (all browsers except ie7)
Now that IE9 supports
If we can support ie8 (@31%) we can forever forget attachEvent.addEventListener
and IE7's market share is diminishing (goodle analytics tell me that ie7 and older is at 14% and loses 2% per month).That mean we support all current browsers but not ie7 and older.
CSS3 Ribbons
How to create this 3d ribbon using only CSS3:
CSS3 title Ribbon. Works in IE9, FF4, C6, O10.
CSS3 title Ribbon. Works in IE9, FF4, C6, O10.
Javascript i18n (internationalization)
The users of a web app should be able to select the interface language of preference. The default language is english and the developer has to give a list of the terms used along with the translations in all languages supported.
Each term can be
Each term can be
Each user selects a UI language that is stored in:
ins.oUser.eUsrLang
Enumeration ins.enLng contains all the languages our system supports.
If a specified term is not supported, in the language that the user has chosen, then the english term is used.
Ajax C#
- Visual Studio 2010/Solution Explorer
- Solution.Add New Project.Visual C#.Web.ASP_NET Empty Web Application
- Project.Add New Item.Visual C#.Generic Handler
<%@ WebHandler Language="C#" Class="Aj" %> using System; using System.IO; using System.Web; public class Aj : IHttpHandler { public void ProcessRequest (HttpContext context) { Stream stIn = context.Request.InputStream; int nLen = (int)stIn.Length; byte[] aIn = new byte[nLen]; stIn.Read(aIn, 0, nLen); System.Text.UTF8Encoding enc = new System.Text.UTF8Encoding(); string sData = enc.GetString(aIn); string[] aData = sData.Split(); int nA = Convert.ToInt32(aData[2]); int nB = Convert.ToInt32(aData[3]); int nResult = nA + nB; context.Response.CacheControl = "no-cache"; context.Response.ContentType = "application/javascript"; context.Response.Write("["+nResult.ToString()+"]"); } public bool IsReusable {get {return false;}} }
Ajax Javascript
How to call an ajax service from a web page using
- Javascript
- XMLHttpRequest
- POST
Javascript Stopwatch
I want to measure how long some processes are taking. So I wrote the
Stopwatch
class (click "Start", wait some seconds, click "Stop":
Class Stopwatch
"use strict"; ins.Stopwatch = function () { var dFr, dTo, that = this; this.nMilliseconds; this.nSeconds; this.nMinutes; this.nHours; this.nDays; var _bRun = false; this.bRun = function () { return _bRun; }; this.Start = function () { _bRun = true; this.Reset(); dFr = new Date(); }; this.Stop = function () { _bRun = false; if (!dFr) { return Reset(); } else { dTo = new Date(); return Calc(); } }; this.Reset = function () { dFr = dTo = null; this.nMilliseconds = this.nSeconds = this.nMinutes = this.nHours = this.nDays = 0; return 0; }; this.toString = function (sFormat) { if (typeof sFormat !== "string") sFormat = "m:s.f"; return sFormat.replace(/d/g, this.nDays.toString()). replace(/h/g, this.nHours.toString().PadLeft(2, "0")). replace(/m/g, this.nMinutes.toString().PadLeft(2, "0")). replace(/s/g, this.nSeconds.toString().PadLeft(2, "0")). replace(/f/g, this.nMilliseconds.toString().PadLeft(3,"0")); }; var Calc = function () { if (dFr && dTo && dFr.getTime() < dTo.getTime()) { var nTime = dTo.getTime() - dFr.getTime() that.nMilliseconds = Math.round(nTime); that.nSeconds = Math.floor(that.nMilliseconds / 1000); that.nMilliseconds -= that.nSeconds * 1000; that.nMinutes = Math.floor(that.nSeconds / 60); that.nSeconds -= that.nMinutes * 60; that.nHours = Math.floor(that.nMinutes / 60); that.nMinutes -= that.nHours * 60; that.nDays = Math.floor(that.nHours / 24); that.nHours -= that.nDays * 24; return nTime; } else { return that.Reset(); } }; this.Reset(); }; if (typeof String.prototype.PadLeft != "function") { String.prototype.PadLeft = function (nLen, sPad) { if (typeof sPad !== "string") sPad = " "; if (typeof nLen !== "number") nLen = 2; var sResult = this; while (sResult.length < nLen) sResult = sPad + sResult; return sResult; }; }Usage:
var oSW = new i.Stopwatch(); var oBtn, oDiv; window.onload = function () { oBtn = document.getElementById("btnFr"); oDiv = document.getElementById("divResults"); oBtn.onclick = ToggleSW; }; var ToggleSW = function () { oBtn.disabled = true; if (oSW.bRun()) { oSW.Stop(); } else { oSW.Start(); } oBtn.innerHTML = oSW.bRun() ? "Stop" : "Start"; oDiv.innerHTML = oSW.bRun() ? "" : oSW.toString("m:s:f"); oBtn.removeAttribute("disabled"); };
DOM prototype extensions
DOM should be OO. Fortunately it is to fix with javascript.
The problem is that the code becomes very verbose (and not elegant) when I want to create a part of a web page in code.
When I want to create a table in code, I create a documentFragment and call a MakeTable function:
DOM is not object oriented so for just one row and two cells:
The problem is that the code becomes very verbose (and not elegant) when I want to create a part of a web page in code.
When I want to create a table in code, I create a documentFragment and call a MakeTable function:
DOM is not object oriented so for just one row and two cells:
HTML5 Forms browser support
In the first column you can test the TextBox described in the 3rd column.
The second column your browser claims support (or not) of the feature.
The first 6 rows test the new attributes and the following rows test the new input types.
You should try it with the latest Opera & Chrome.
CSS entries:
The second column your browser claims support (or not) of the feature.
The first 6 rows test the new attributes and the following rows test the new input types.
You should try it with the latest Opera & Chrome.
<input placeholder="write here" /> |
||
<input autofocus /> |
||
<input required /> |
||
<input pattern="\d/\d/\d{4}" /> |
||
<input list="lista" /><datalist id="lista"> <option value="www.ins.gr" label="ins" /> <option value="pkario.blogspot.com" label="blog" /> <option value="www.insmoney.gr" label="insmoney" /> </datalist> | ||
<input multiple type="email" /> | ||
<input type="email" /> |
||
<input type="url" /> |
||
<input type="number" min="2" max="11" step="3" /> |
||
<input type="range" min="2" max="11" step="3" value="5" /> |
||
<input type="tel" /> |
||
<input type="time" min="11:00" max="22:00" step="30" /> |
||
<input type="date" /> |
||
<input type="month" /> |
||
<input type="week" /> |
||
<input type="datetime" /> |
||
<input type="datetime-local" /> |
||
<input type="search" results="10" autosave="txtSearch" /> |
||
<input type="color" /> |
||
<progress value="27" max="100">27%</progress> | ||
<meter min="0" max="100" value="70" low="-100" hight="100">value is 70</meter> | ||
Web workers | var oWorker = new Worker("work.js"); | |
Canvas | var oContext = document.createElement('canvas').getContext; | |
SVG | document.implementation.hasFeature( "http://www.w3.org/TR/SVG11/feature#BasicStructure","1.1") | |
Offline apps | window.applicationCache; | |
localStorage | window.localStorage["sKey"]=sValue; | |
sessionStorage | window.sessionStorage["sKey"]=sValue; | |
Web SQL Database | window.openDatabase | |
indexedDB | window.indexedDB, mozIndexedDB, webkitIndexedDb | |
Web Sockets | window.WebSocket | |
Cross doc messaging | window.postMessage | |
File API | FileReader | |
Geo Location | navigator.geolocation | |
getters & setters | function Person(){ var _sName; } Person.prototype = { get sName(){return this._sName;}, set sName(sVal){this._sName = sVal;} } | |
A set of words that is marked | A <mark>set of words</mark> that is marked | |
<time datetime="2010-08-20T17:00">5pm</time> |
input:valid {background-color:#efe;} input:invalid {background-color:#fee;}function to check validity:
function Check(oEvt) { oEvt = oEvt || event; var oEl = oEvt.target || oEvt.srcElement; return ("validity" in oInput)? oEl.validity.valid: null; }
Table based infobox with css3
Table based infobox:
html:
<table><thead><tr> <th>Attribute</th><th>Value</th> </tr></thead><tbody> <tr><td>width</td><td>100px</td></tr> <tr><td>title</td><td>text</td></tr> <tr><td>colspan</td><td>4</td></tr> <tr><td>rowspan</td><td>2</td></tr> </tbody></table> <table><thead><tr><th> Title </th></tr></thead><tbody><tr><td> <ul> <li>First element</li> <li>Second element</li> <li>Third element</li> <li>Fourth element</li> </ul> </td></tr></tbody></table>css (part of Reset.css included):
* { /*** Reset start ***/ padding:0; margin:0; font-family:Tahoma,Verdana,Arial; font-size:100%; } ul { list-style:disc outside;padding-left:25px; } table { border-spacing:0; border:1px solid #666; } body {color:#333;} /* Reset end */ table { margin:20px; width:10em; background:#ace; background: -moz-linear-gradient(top,#eff,#ace 7%, #ace 90%,#777 ); background: -webkit-gradient(linear, left top, left bottom, color-stop(0,#eff), color-stop(0.07, #ace), color-stop(1,#777)); -moz-border-radius:.6em; border-radius:.6em; -webkit-box-shadow: .4em .4em .4em rgba(0,0,0,0.5); -moz-box-shadow: .4em .4em .4em rgba(0,0,0,0.5); box-shadow: .4em .4em .4em rgba(0,0,0,0.5); } table th { padding:.4em; text-align:center; border-bottom:1px #888 solid; background-color:transparent; text-shadow: .06em .06em .1em rgba(0,0,0,0.5); } table td { background:#fafafa; padding:.5em; border:1px #888 solid; } table tr:last-child td:first-child { -moz-border-radius-bottomleft:.5em; border-bottom-left-radius:.5em; } table tr:last-child td:last-child { -moz-border-radius-bottomright:.5em; border-bottom-right-radius:.5em; }
Reset.css
My own Reset.css
Actually it contains Base.css as well. I don't see the reason for an extra Base.css
I don't test on IE7 (forget about IE6).
Yahoo yui3 cssreset
Eric Meyer
HTML5 Reset.css
http://html5boilerplate.com/
Actually it contains Base.css as well. I don't see the reason for an extra Base.css
I don't test on IE7 (forget about IE6).
* { -moz-box-sizing:border-box; } /*upd: 20111020 ************************************/ * { box-sizing:border-box; } html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, strike, strong, sub, sup, dl, dt, dd, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin:0; padding:0; border:0; font-weight:inherit; font-size:100%; font-style:inherit; font-family:inherit; border:1px none #000; background:transparent; vertical-align:baseline; } body { line-height: 1.2; color:#333; } body, select, input, textarea { font-family:Tahoma,Verdana,Arial,helvetica, Sans-Serif; margin:0; } article,aside,canvas,details,figcaption,figure, footer,header,hgroup,menu,nav,section,summary { display:block; } pre,code { font-family:Monospace; } html,body { height:100%; } table { border-collapse:collapse; border-spacing:0; /*width:100%;*/ } th,td { border:1px solid #666; /*padding:.5em;*/ vertical-align:top; } caption { margin-bottom:.5em; text-align:center; } blockquote,q { quotes: "\201C" "\201D"; } blockquote:before { content: "\201C"; font-weight: bold; } blockquote:after { content: "\201D"; font-weight: bold; } ol,ul {list-style-position:outside;padding-left:25px;} ol {list-style-type:decimal;} ul {list-style-type:disc;} li:before {display:marker;marker-offset:1em;} ins {text-decoration:underline;} del {text-decoration: line-through;} em {font-style:italic;} h1 {font-size:200%;} h2 {font-size:178%;} h3 {font-size:159%;} h4 {font-size:141%;} h5 {font-size:126%;} h6 {font-size:112%;} h1,h2,h3,h4,h5,h6 {margin:1em 0;} h1,h2,h3,h4,h5,h6,strong,th {font-weight:bold;} mark {background-color:#ff9;} abbr,acronym { border-bottom:1px dotted #000; cursor:help; } p,fieldset {margin-bottom:1em;}Credits:
Yahoo yui3 cssreset
Eric Meyer
HTML5 Reset.css
http://html5boilerplate.com/
Table Layout for web pages
You should never use tables for layout. You should use
div
.
Having said that and having spent some time trying to force div
to look like table I decided that enough is enough. If a table is what I need, a table is what I will use.
What I need is a layout:- Header should cover the top of the window.
- Header height should be determined by its contents.
- Footer should cover the bottom of the window and resize by it. It must always be at the bottom of the window except when the contents of the page are more than that.
- Left aside width should resize according to contents. The height should resize to full window or to contents (the largest of the two)
- Right aside should behave like left aside.
The entire think should behave as a TABLE.
<table id="tabLayout" role="presentation"> <tbody><tr id="trHeader"> <td colspan="3">header</td> </tr><tr> <td id="tdNav">nav</td> <td>main</td> <td id="tdAside">aside</td> </tr><tr id="trFooter"> <td colspan="3">footer</td> </tr></tbody></table>
/*=== Reset start ====*/ html,body,table,tr,td { margin:0; padding:0; -moz-box-sizing:border-box; -o-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; } table { border-collapse:collapse; width:100%; } html,body { height:100%; } /*=== Reset end ===*/ table#tabLayout { border-collapse:collapse; width:100%; height:100%; } #trHeader, #trFooter { height:1px; } #tdNav, #tdAside { width:1px; }
Public key cryptography with GnuPG
Problem:
I want to send a document to a partner and be sure that no one else is going to read it.
I want to sign a document and send the signarure to a partner in a way he is sure that I signed it and he can prove it if need arises.
Solution:
Acquire a public key and a private key
- Go to GnuPG for Windows and download Gpg4win
- Install it
- Run GPA (GNU Privacy Assistant). It will prompt you for a new key. Go for it.
- It will ask for your real name and email. These are needed
- So that is known who is signing what
- To be registered in the public database
hkp://keys.gnupg.net
so that people can search and find your public key
- It will ask for a passphrase. This is important. It is like a password but you are not supposed to change it now and then.
So find a small phrase you will remember and intersperse with numbers or symbols (in a way you will remember).
Encrypt a document (to send to a partner).
- Find your partner's public key. You can ask him (better) or look at a server.
- Open GPA
- Import your partner's public key if you have not done already so.
Keys⇒Import
GPA⇒Toolbar⇒Files
. File Manager application starts.- Select the file and Encrypt it.
Sign a document
You want to send a document that there is no reason to be encrypted. The receiving party must have a way to prove that you sent the document, and it is not changed in any way.
- Run GPA
- GPA⇒Toolbar⇒Files.
File Manager
application starts.
- File⇒Open. Select the file you want to sign.
- Encrypt a file using a partner's public key.
- Encrypt a file using your own public key (only you can decrypt it). Symmetric cryptography is a lot better for the task but you can do it if you insist.
- Sign a file using your own private key.
- Sign and encrypt a document using your own private key
- Decrypt a document you received using your own private key
- Verify the signature of a document you received using your partner's public key
- Set your mail agent format to "text only"⇒ Copy⇒Clipboard Encrypt⇒ Paste Encrypted to your mail program⇒send mail
- If your mail agent is supported (Outlook, outlook express, thunderbird etc) then just install the addin and you can do it through your agent.
Hungarian Notation
Not really Hungarian. This is how I prefix variables, Database Table columns and how I abbreviate common words in my apps (this is an Abr).
- prefixes are application oriented. No language specific datatypes (int32, word etc)
- prefixes are the same cross language. Each programming language used in a project should have the same name for the same variable (eg SQL, C#, Javascript)
prefix | Data Type | Example | Usage | Comments |
---|---|---|---|---|
n | numeric | nPerAge | Person's age | Integer values. Can be negative. |
s | string | sPerLNm | Person's Last Name | |
c | currency | cPerSalary | Person's Salary | |
r | real number | rPerWeight | Person's Weight | used to be “f” but I needed f for functions. |
d | date | dPerDob | Person's DateOfBirth | |
t | time | tMetStart | Meeting's Start Time | |
o | object | oPerson | Person oPerson=new Person(); (C#) var oPerson=new Person(); (C#) | |
f | function | fCallBack | var fCallback=function(){}; | |
e | enumeration (string) | ePerMaritalStatus | Person's Marital Status | can have one of prespecified values: see en |
en | enumeration list | enMaritalStatus | The structure containing the enumeration values | var enMaritalStatus=[SINGLE,MARRIED,SEPARATED,DIVORCED] |
p | Percentage | pVat | Value added Tax (percentage) | pVat = 0.21; (=21%). Some people think p should be reserved for pointers. I think it is reasonable if there is a possibility to use pointers. |
b | Boolean | bPerLicensed | bPerLicensed = true; (C#,
Javascript) bPerLicensed = 1; (SQL) | |
nk | primary key | nkPer | ||
nf | foreign key | nfPerOrg | Person's organization | |
rv | rowversion | rvPer | multi user updates | |
Array | Values | var Values=[]; | Just use the plural form of a noun. | |
prefix | Data Type | Example | Usage | Comments |
---|---|---|---|---|
frm | Form | frmPerEdt | Person Edit form | |
chk | checkbox | chkbPerActive | Person's active flag | |
cbo | combo | cboeMaritalStatus | ||
btn | button | btnDone | ||
fra | frame-fieldset | fraAdr | Group fields for Person's address | |
opt | opt | opteMaritalMarried | Marital Status implemented with option button instead of combo | |
txt | textbox | txtsPerLNm | Person's Last Name | |
tmr | timer | |||
dlg | dialog | dlgConfirm | Modal Dialog | |
lbl | label | lblsPerLNm | "Last Name" | |
rpt | report | rptDailyOrders | ||
img | image | imgLogo | ||
Full Text | Abbreviation |
---|---|
Address | Adr |
Agent | Agn |
Amount | Amn |
Category | Cat |
City | Cty |
Customer | Cus |
Date Of Birth | Dob |
Father | Fth |
FirstName | FNm |
Last Name | LNm |
Issue | Iss |
Major | Mjr |
Minor | Mnr |
Mother | Mth |
Name | Nm |
Organization | Org |
Person | Per |
Product | Prd |
Project | Prj |
Transaction | Trn |
Favicons in Web Applications, Web Sites, Blogger
- Create a 16x16 png image using paint.net. If you want you can have transparent background.
- Convert to ico (you can use Visual Studio or DynamicDrive
- <link href='http://www.example.com/myFavicon.ico' rel='shortcut icon' type='image/icon'/>
- favicon.png
- favicon.ico
View your blog. Your favicon should be displayed instead of Google's.
Model View Controller, Javascript
How to write Model View Controller (MVC Code) for the form:
Problem:
Write Model View Controller (MVC) code without any framework:Solution using just javascript.
Copy SQL Server Diagram
Problem:
A team is developing an application. Each developer works on a copy of the DB (as should)
When the DB Schema is changed a script is used to roll-out the changes.
But what about the Database Diagram? How can each developer have an updated Schema?
Solution
USE DATABASE_NAMEReplace 'Diagram_Name' with the name of the diagram we want to copy.
Query => Results To => Results to text
Run the script:
DECLARE @line NVARCHAR(MAX)='' ,@index INT=1 ,@chunk INT=32 ,@diagram_id INT=(SELECT diagram_id FROM sysdiagrams WHERE name='Diagram_Name') ,@newId INT=0; DECLARE @size INT=(SELECT DATALENGTH(definition) FROM sysdiagrams WHERE diagram_id=@diagram_id); SELECT @line = 'INSERT INTO sysdiagrams ([name], [principal_id], [version], [definition])' + ' VALUES (''' + [name] + ''', '+ CAST (principal_id AS VARCHAR(100))+', '+CAST (version AS VARCHAR(100))+', 0x);' FROM sysdiagrams WHERE diagram_id = @diagram_id PRINT 'SET NOCOUNT ON' PRINT 'DECLARE @id INT;' PRINT @line PRINT 'SET @id=SCOPE_IDENTITY();' WHILE @index < @size BEGIN SELECT @line = 'UPDATE sysdiagrams SET [definition] .Write (' + ' ' + UPPER(sys.fn_varbintohexstr (SUBSTRING (definition, @index, @chunk))) + ', null, 0) WHERE diagram_id = @id;' -- index:' + CAST(@index AS VARCHAR(100)) FROM sysdiagrams WHERE diagram_id = @diagram_id PRINT @line SET @index = @index + @chunk END
- In the results windows an UPDATE_SCRIPT is output that can recreate the Database Diagram.
- Send the UPDATE_SCRIPT to target computer.
- Open SQL Server Management Studio.
- New Query
- Select target Database
- If there is no diagram click on Database_Diagrams and confirm to let Management Studio create sysdiagrams table.
- If an older version of the diagram exists, delete it.
- Paste UPDATE_SCRIPT
- RUN UPDATE_SCRIPT
- Refresh Database to see the created Diagram.
- You are done.
Blogger code prettifier
Problem:
When posting code in blogger looks awful.Solution:
There is a nice open source project that prettifies the posted code.Download code
- http://code.google.com/p/google-code-prettify/downloads/list
- download prettify-small-21-Jul-2010.zip (or latest) (I includee the date so I remember when to update)
- Extract to any folder you like on your disk.
- open folder "prettify" and leave it open (will be needed soon)
- Use Notepad++ for opening and copying minimized file content. Most editors mess long lines.
Create a Gadget in Blogger:
- http://www.blogger.com
- Layout
- Add a Gadget (anywhere)
- Basics
- HTML/Javascript
- Title: prettify (choose any title you like)
- Content:
<style type="text/css"> ===>insert contents of prettify.css <=== </style> <script type="text/javascript"> ===> insert contents of prettify.js (do not use minified-does NOT work!) <=== </script>I customize adding:
(Seems that blogger encloses post in a div with class="post" so that we can style it safely without changing the rest of the page.)
<style type="text/css"> .post .prettyprint { border:1px dotted #666; background-color:#ffc; overflow:auto; } .post .prettyprint ol.linenums li { list-style-type:decimal-leading-zero; } .post .nocode { background-color:#fff; border-right:1px dotted #666; } </style> <script type="text/javascript> ===> insert contents of lang-css.js <=== ===> insert contents of lang-sql.js <=== ===> if needed insert contents of lang-*.js where * is apollo,hs,lisp,lua,ml,proto,vb,vhdl,wiki... <=== </script>
Modify Blogger Template:
- Layout
- Edit HTML
- Click in template TextArea
- find (^F) <body>
- change to
<body onload="prettyPrint()" >
How to use:
Browsers display Tabs as 8 characters and not 4. So:If you use Tabs in your source and Visual Studio 2010 then:
- ^A (Select All)
- Edit > Advanced > Untabify Selected Lines
- ^C (Copy)
- ^Z (Undo Untabify)
Edit the code sample you want to post
change | to |
---|---|
< | < |
> | > |
& | & |
<pre class="prettyprint lang-html"> Paste edited (as above) code here </pre>We can replace html in lang-html with:
"bsh", "c", "cc", "cpp", "cs", "csh", "cyc", "cv", "htm", "html", "java", "js", "m", "mxml", "perl", "pl", "pm", "py", "rb", "sh", "xhtml", "xml", "xsl".
The above languages are supported by default. You can add more if you include the corresponding js from
src
folder.Numbering lines:
<pre class="prettyprint linenums:1">/* This is line 1 of my code * and here's line 2 */ print("I'm line number 3"); </pre>gives (no, it doen't work- You have to go into prettify.css and delete everything about classes L0-L9:
li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8{list-style:none}
li.L1,li.L3,li.L5,li.L7,li.L9{background:#eee})
/* This is line 1 of my code * and here's line 2 */ print("I'm line number 3");
Subscribe to:
Posts (Atom)