Displaying Code With Syntax Highlighting

N.nu has automatic support for displaying code. Just wrap your code with <pre><code>Here comes your code</code></pre>.

Like this:

<pre><code>
Place your code here. 
</code></pre>

This makes it possible to display the code on the page as < and > are automatically being transformed to their entities. Also the code are being displayed in different colors.

Languages supported are: HTML, XHTML, XML, CSS, PHP, SQL, ASP, C, C++ and many more.

Example with HTML:

<!DOCTYPE html>
<head>
	<title>This is the custom title element</title>
	<link rel="stylesheet" href="https://staticjw.com/n/templates/twentyeleven/style.css" type="text/css" />
	<link rel="shortcut icon" type="image/x-icon" href="https://staticjw.com/n/favicon.ico" />
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="generator" content="N.nu" />
	<meta property="og:image" content="http://s.n.nu/thumb.php?url=example.n.nu&w=120&access=d625c8d" />
	<link rel="stylesheet" type="text/css" href="https://staticjw.com/n/css/topbar01.css" />
</head>

Example with CSS:

body {
	background: #e2e2e2;
}
#page {
	background: #fff;
}

/* Headings */
h1,h2,h3,h4,h5,h6 {
	clear: both;
}
hr {
	background-color: #ccc;
	border: 0;
	height: 1px;
	margin-bottom: 1.625em;
}

/* Text elements */
p {
	margin-bottom: 1.625em;
}

Example with Javascript (source):

<script language="javascript">
function validateForm()
{
var x=document.forms["myForm"]["email"].value
var atpos=x.indexOf("@");
var dotpos=x.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)
  {
  alert("Not a valid e-mail address");
  return false;
  }
}
</script>

Example with PHP (source):

<?php
$text = '<p>Test paragraph.</p><!-- Comment --> <a href="#fragment">Other text</a>';
echo strip_tags($text);
echo "n";

// Allow <p> and <a>
echo strip_tags($text, '<p><a>');
?>

Websites that use this:

Useful links for those not making the website in N.nu

  • Coloring is made with Highlight.js
  • Use a tool such as this one to convert HTML to their entities. (done automatically with N.nu)
This website was built using N.nu - try it yourself for free.(info & kontakt)