Skip to main content

Add Instant Fonts And Highlighting To Your Website

web design fonts javascript

By adding a few lines to your web pages’ template, you can improve your web site’s appearance. You don’t need to download or configure any additional files. The CSS and javascript are hosted for you.

Just add lines like these examples between the <head> tags.

Google fonts screenshot
Google offers hundreds of high-quality web fonts

Google Web Fonts
#

Why struggle with maintaining your own fonts? Use Google’s. Choose a family of font styles from the Google fonts collection. Enter the family name as the parameter in a stylesheet directive like this one for Open Sans:

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Open+Sans">

Syntax Highlighting
#

highlight.js applies automatic color highlighting to all HTML blocks within <pre><code> tags. Add these two lines:

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.2/styles/default.min.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.2/highlight.min.js"></script>

To trigger the highlighting, add this third line:

<script>hljs.initHighlightingOnLoad();</script>

Resources
#

Related

A Mneumonic Poem For Learning Markdown Syntax
web design markup
###Headlines start with hashes
Fossil: A Local Source Code Repository
coding version control development
Git has become the de facto standard for web development source control.
Installing Oracle 11g Locally On Windows
server apps database
You can install a free copy of the Oracle 11g database for development purposes.