Winnipeg Web Design
a winnipeg website design company.
a winnipeg website design company.
In a project I have been working on for the last week or so I came across a case where I wanted to have placeholder text in an input field.
Placeholder text in an input field is an easy way to tell the user what to input, but also not clutter up the page. For example, this is really handy for a Username / Password login section in your header.
Syntax highlighting can make a huge difference when it comes to showing code snippets. We have all seen it, but how many of us have actually stopped to consider how it works.
There are a handful of good options that I am aware of. Some are easier to use and others offer additional features, such as copy, show code, etc. All projects I will mention are JavaScript based. There should be very few issues with cross-compatibility.
One of the most popular ones, and the one I am going to highlight (no pun intended) is called SyntaxHighlighter.
SyntaxHighlighter includes support for 25 different programming languages (referred to as brushes in this project) with additional brushes available for download. One thing I really like about SyntaxHighlighter is that each brush is an individual JavaScript file.
To use; download the latest version and upload it to a directory on your server. Include the core JavaScript and CSS file as well as only the brush(s) needed. This limits the size of the JavaScript files, which would increase load time. The only downside here is that if multiple languages are needed on a single page, we will have to call each brush file individually. This will increase the number of HTTP requests, but the files’ sizes are all small, so there will be a negligible reduction in load time for the multiple requests.
We then call the script using "SyntaxHighlighter.all()."
<script type="text/javascript" src="scripts/shCore.js"></script> <script type="text/javascript" src="scripts/shBrushJScript.js"></script> <link type="text/css" rel="stylesheet" href="styles/shCoreDefault.css"/> <script type="text/javascript">SyntaxHighlighter.all();</script>
After the core and brush files are called, we simply wrap our code in a <pre /> tag with a class set stating which brush the following code is to use.
<pre class="brush: html;">
<html>
<head>
<title>Example of the Greatest Code Ever</title>
...
</pre>
There are a few variations of Syntax Highlighter as a WordPress plugin. This simplifies installation a lot. Make sure to pay attention to the documentation of the version you install. Some follow the project standard of wrapping your code with the <pre /> tags where others use [sourcecode language=”php”] [/sourcecode].
That is pretty much it. If the target site is using a template, why not just include the files in the header, or, create a separate file and call it only when needed.
<?php
include "header.php";
include "SyntaxHilighter.php"';
....
?>
Here are two other projects that could be worth checking out:
This post is not entirely web-related but this blog is just as much about business, as web development. Any web developer has to go through the stage of applying for jobs.
I have applied for quite a few web developer jobs in my day so here are some tips I have come up with.
The other day I was sent a pdf that I was supposed to pull content from for a website I was working on.
I didn’t think much of it, being that I thought I would copy and paste the content into the HTMLÂ Of course things always have to be harder than they appear per Murphy’s Law.
Instead of re-typing everything by hand, I looked for a faster alternative. This alternative was to find an OCR tool. Optical character recognition (OCR) is defined by Wikipedia.org as:
OCR is the mechanical or electronic translation of scanned images of handwritten, typewritten or printed text into machine-encoded text.
Most OCR tools I have ever used are terrible at what they do, and usually spit out weird symbols. That is where Microsoft Office OneNote comes in. Read more »
Search engine optimization (SEO) can be a wild and complex animal. For the average webmaster or blogger, there are so many questions to be answered: How do I get Google to index my site? Is my website optimized for search? What the heck is metadata? Should I hire an SEO professional? Read more »
Twitter
Follow me on Twitter to keep up to date!
RSS Feed
Keep up with all of our updates by subscribing to our RSS feed!
FaceBook
Join our group on Facebook and become a fan of us!