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

Saturday, January 16, 2010

Source Code Syntax Highlighting for Web Pages

Highlighting code syntax has become a common way to improve the code readability and is used broadly in different programming language editors. There are some approaches how to show highlighted code in a web page.

I would divide all of them into the three categories:
  1. If the web-site is on ASP (Active Server Pages) or PHP (Personal Home Page) host and all the files and the web page generating code are under your control then highlighting can be handled by a PHP or ASP routine. In PHP, for example, there are GeSHi (Generic Syntax Highlighter) and CHIP (Code Highlighting in PHP); Actipro CodeHighlighter is ASP.NET Control.

  2. If there is no total control over the web-site as it is, for instance, with Blogger then JavaScript highlighter can be a solution. There are many JavaScript highlighters available, here are some popular ones:
    They all support pretty long list of languages, easy to install and customize.
    In general scripts should be kept either on a host or directly in the page and the drawback with the approach is that too many scripts can degrade a web-page performance.

  3. The straight forward way is to use a highlighting tool which generates HTML code, so the code can be copied and pasted directly in a web-page. There are some online tools of this kind, for example:

    Another possibility is to use offline converters:
    • Notepad++ and SciTE are editors both based on SCIntilla, highlight syntax of many languages and have an option to export the highlighted code as HTML.

    • Pygments is a generic syntax highlighter and it can be used by many different ways including as a standing along converter.

    The direct HTML highlighting approach, for example, seems to be the best suitable for this blog since not so many posts are going to have any code to highlight. Here is a small Python example:
    import Tkinter as tk

    def keycodess(event):
    if event.keysym == 'Escape':
    root.destroy()
    x = event.char
    if x == "a":
    print "A done"
    elif x == "b":
    print "B done"
    elif x == "c":
    print "C done"
    elif x == "d":
    print "D done"
    else:
    print x

    root = tk.Tk()
    print "a. Menu choice A"
    print "b. Menu choice B"
    print "c. Menu choice C"
    print "d. Menu choice D"
    root.bind_all('', keycodess)
    # hiding the tk window
    root.withdraw()
    root.mainloop()

Keep in mind that copying formatted code from Internet Explorer can be an issue - Formatted Code - Internet Explorer's Copy Issue.
Read more...

Sunday, August 9, 2009

Blogger Template with Rounded Corners and Adjustable Column Width

While I liked the general style of the "Rounders 3" Blogger template, I really wanted some things to be modified:


  1. to add the third vertical column to the left of the main post section;
  2. the third column should be consolidated with the main post section in one visual block;
  3. I'd like to keep rounded corners.
All those are definitely feasible, but adjusting column width in the original "Rounders 3" could become some headache.

In the "Rounders 3" rounded corners are defined with background pictures in two wrappers: one for two top corners and the other for two bottom ones.
In this case every adjustment in width of a column would require redrawing of the corner picture to follow the change.

A simple solution to make width easily adjustable would be to employ a 4-wrap structure each wrap with one of the corners.
For that 4 corner pictures need to be at a reachable web hosting.
I uploaded them to Picasaweb - anyway it is the default Blogger's storage for images.

Since I planned to use the corners for all of the blocks in the blog page the template styles should be updated with new classes of <div>

/* Round corners div wrappers --------------- */
div.wrap-1 {
float:$startSide;
background-image: url("http://lh5.ggpht.com/
_6uhqGhAnYS8/SoDG27WBpuI/AAAAAAAAAR8/
7W7XN9gbIKY/s800/RCorner_TopLeft.png");
background-repeat: no-repeat;
background-position: $startSide top;
padding:0;
}

div.wrap-2 {
float:$startSide;
width:100%;
background:transparent url("http://lh3.ggpht.com/
_6uhqGhAnYS8/SoDKOuKcJ3I/AAAAAAAAASI/
FO8GZlpdnGU/s800/RCorner_TopRight.png")
no-repeat $endSide top;
padding:8px 0 0;
}

div.wrap-3 {
float:$startSide;
width:100%;
background:transparent url("http://lh3.ggpht.com/
_6uhqGhAnYS8/SoDKXk4wLwI/AAAAAAAAASM/
vZCNY04HzOs/s800/RCorner_BottomLeft.png")
no-repeat $startSide bottom;
}

div.wrap-4 {
float:$startSide;
width:100%;
background:transparent url("http://lh6.ggpht.com/
_6uhqGhAnYS8/SoDKowtWYZI/AAAAAAAAASQ/
j8KRoSoiN9c/s800/RCorner_BottomRight.png")
no-repeat $endSide bottom;
}
/* Round corners div wrappers END ----------- */

HTML wrapping structure looks like this:

<div class='wrap-1' id='header-wrapper'>
<div class='wrap-2'>
<div class='wrap-3'>
<div class='wrap-4'>
<b:section class='header' id='header' maxwidgets='1'>
.......
</b:section>
</div>
</div>
</div>
</div>

Adding "width" attribute to the <b:skin> (CSS) section:

#header-wrapper {
width:$BlogWidth;
background-color:$titleBgColor;
margin-top:22px;
margin-$endSide:0;
margin-bottom:0;
margin-$startSide:0;
padding:0 0 0 0;
color:$titleTextColor;
}

and the corresponding variable at the top of the <b:skin> section:

<Variable name="BlogWidth" description="Total Blog Width"
type="automatic" default="920px" value="920px">

makes adjustment of the section width a snap.

It should be said that many people are interested in rounded corners techniques for web design. While my current goal was only to make width of a rounded corner block easily adjustable from a variable but my choice of rounded corners implementation was straight forward - there are many very interesting approaches allowing to create rounded corners with fancy graphic effects as 3D profiles, gradients, reflections, shadows, etc. Recently I bumped on an interesting post with a list of different techniques: "25 Rounded Corners Techniques with CSS" - check it out.
Read more...

Wednesday, July 15, 2009

Adding Favicon to Blogger Template

Favicon or Shortcut Icon is a small picture which appears in web-browser address field, tab and bookmark of the corresponding web site. Blogger has a default icon assigned, but it seems pretty nice to add an original favicon to your blog: it would give a distinctive, easier to remember view to the bookmark and to the web page itself. Adding a favicon is not difficult at all, but the solutions I found on the Web were not quite correct, at least they did not work for my Blogger and web-site.

Considering that a desired image have already been prepared the following issues should be resolved:
  1. A proper internet storage for ico file should be found. While some web browsers are flexible to work with different picture standards (jpeg, png, gif) as a favicon the main limitation comes from IE which can work with ICO images only. On the other hand not many sites including Blogger itself accept ICO files for uploading. I chose 1 Pixel Host - so far it seems working fine. Convert your image into ICO format of 16x16 or/and 32x32 pixels and upload to the host. Have to say: while favicon file probably should stay with the *.ico extension unchanged, it may have any name, not only "favicon.ico". 1 Pixel Host replaces the original file name with a random mess. For instance, mine got the name "yjtxmkry15su2xsg8em.ico", so copy Direct Link carefully.

  2. Reference to the ico file should be added to the blog template. There are direct instructions from Mictosoft how to do it in "How to Add a Shortcut Icon to a Web Page" , but it does not work by some reason neither for my Blogger nor for my home page at ISP (Internet Service Provider). Somehow the problem was resolved by changing position of the "Shortcut Icon" line. Microsoft suggests it like this:

    <head>
    <link rel="SHORTCUT ICON"
    href="http://www.mydomain.com/myicon.ico">
    <title>My Title</title>
    </head>
    To make it work I had to put the "Shortcut Icon" line below the "title" line:

    <head>
    <title>My Title</title>
    <link rel="SHORTCUT ICON"
    href="http://www.mydomain.com/myicon.ico">
    </head>
    Replace the "href" value with the Direct Link to your ICO file, add the line to your Blogger template, save - and that's it. From now the favicon should appear at every page of your blog.
Adding a favicon to a web-page is similar besides that you don't need to find external file storage - upload the picture to the web-site hosting directory and put a proper direct link to it in the web-pages.

If you have any questions regarding favicon you can check out source code of any website which has favicon including mine.
Read more...