SHJS Demo - Default Theme

Website: http://shjs.sourceforge.net/

HTML

 
<header>
<h1>Example HTML</h1>
</header>
<main class="style">
<p>Some text</p>
</main>

JavaScript

var example = true;

function foo(arg) {
	console.log( "do", arg);
	arg = example ? true : false;
	return arg;
}

CSS

@import "somestyle.css"

body {
	background: white;
}

.wrapper {
	background: #F88;
	color: #454545;
}

.box::after {
	content: "...";
}

PHP

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<article>
<h1><?php the_title(); ?></h1>
<?php the_content(); ?>
</article>
<?php endwhile; endif; ?>

Markdown

# Example Markdown

Some text with *emphasis*

* list
* list
* list

Some text with a [link](http://tutsplus.com)

CoffeeScript

# Objects:
math =
  root:   Math.sqrt
  square: square
  cube:   (x) -> x * square x

# Splats:
race = (winner, runners...) ->
  print winner, runners

# Existence:
alert "I knew it!" if elvis?

# Array comprehensions:
cubes = (math.cube num for num in list)

Handlebars

<header>
<h1>{{title}}</h1>
</header>
<main class="style">
{{content}}
</main>

Jade

- var title = "Example Jade";
header
	h1 #{title}
main.style
	p Some text

LESS

@body_background: white;
@wrapper_background: #F88;
@wrapper_color: #454545;

body {
	background: @body_background;
}

.wrapper {
	background: @wrapper_background;
	color: @wrapper_color;
}

.box::after {
	content: "...";
}

Sass

$body_background: white;
$wrapper_background: #F88;
$wrapper_color: #454545;

body {
	background: $body_background;
}

.wrapper {
	background: $wrapper_background;
	color: $wrapper_color;
}

.box::after {
	content: "...";
}

Stylus

$body_background = white
$wrapper_background = #F88
$wrapper_color = #454545

body
	background: $body_background

.wrapper
	background: $wrapper_background
	color: $wrapper_color

.box::after
	content: "..."