Showing posts with label HTML. Show all posts
Showing posts with label HTML. Show all posts

Monday, July 22, 2013

Add Code Syntax Highlighter to your Blogger

Go to the "Template" menu and click "Edit Html" below the current template, add the following lines above the </head>
 
 

In your content, surround the code block by <pre> element, like to one shown below:

<pre class="brush: csharp">private void Download(string url)
{
    WebClient client = new WebClient();
    client.DownloadFileCompleted +=    new AsyncCompletedEventHandler(client_DownloadFileCompleted);
    client.DownloadFileAsync(new Uri(url), @"c:\temp.html");
}

void client_DownloadFileCompleted(object sender, AsyncCompletedEventArgs e)
{
    //do something here
}
</pre>

which will be rendered as:
private void Download(string url)
{
    WebClient client = new WebClient();
    client.DownloadFileCompleted +=    new AsyncCompletedEventHandler(client_DownloadFileCompleted);
    client.DownloadFileAsync(new Uri(url), @"c:\temp.html");
}

void client_DownloadFileCompleted(object sender, AsyncCompletedEventArgs e)
{
    //do something here
}
If your code block contains template such as the one below:

Dictionary<string, string> some_dict=new Dictionary<string, string>();

Change "Dictionary<string, string>" to "Dictionary&lt;string, string&gt;" so that the code syntax highlighter won't display errorly.

One further thing that i found out is that if you are using dynamic view template for your blogger, the code syntax highlighter probably won't work

Wednesday, July 10, 2013

Set style via class versus id for an element in a web page

Suppose the following is defined in the header of a web page:

<head>
<style type="text/css">
#this_id
{
    border:2px solid;
  border-radius:25px;}
.this_class
{
   border:2px solid;
   border-radius: 25px;
}
</style>
</head>

"this_id" will be specifying the style for an element with id set to "this_id" while "this_class" will be specifying the style for an element with class name set to "this_class". For example

<body>
<div class="this_class">Some class styled content</div>
<div class="this_id">Some id styled content</div>
</body>

Set the width of a span element in a web page

The following style won't work for a <span> element:
<span style="width:33.3%">Some content</span>

To set the width of the <span> element, use the following style instead
<span style="float:left;width:33.3%>Some content</span>

Center a div element in a web page

To center an <DIV> element on the middle of a web page:

<body>
    <div style="width:800px; margin:0 auto;">
        centered content
    </div>
</body>