Dart code prettifier
Dart code prettifier

sons-of-obsidian Theme for Prettify

Beautify the code snippets in your web page.

The code for this Dart-Package ist hosted on GitHub

A step-by-step guide to beautify your code

1/ Add prettify to you pubspec.yaml

name: 'myapp'
version: 0.0.1
description: An absolute bare-bones web app.
#author: <your name> <email@example.com>
#homepage: https://www.example.com

     environment:
     sdk: '>=1.0.0 <2.0.0'

     dependencies:
     browser: any

     prettify: any

2/ Install it

You can install packages from the command line:


    $ pub get


3/ Insert CSS and JS Files


<head>
    <!-- light.css is one of the available themes -->
    <link id="theme" rel="stylesheet" href="packages/prettify/styles/light.css">
    <script type="text/javascript" src="packages/prettify/js/prettify.js"></script>
</head>

4/ Insert Code Snippets

Put the code segments in <pre class="prettyprint"> ...code segments... </pre> or
<code class="prettyprint"> ...code segments... </code> and it will be pretty printed.

Replace special characters with HTML Entities
You can find one of these tools here on http://www.htmlescape.net/


<pre class="prettyprint linenums">
&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;Demo | Prettify&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;h2&gt;Hello, World!&lt;/h2&gt;
  &lt;/body&gt;
&lt;/html&gt;
</pre>

All the code segments inside <pre> are encoded.

5/ Kickstart prettify.dart


import 'package:prettify/prettify.dart';

void main() {
    prettyPrint();
}

6/ That's All. Here's an Example

BEFORE PRETTIFY

<!DOCTYPE html>
<html>
  <head>
    <title>Demo | Prettify.DART</title>
  </head>
  <body>
    <h2>Hello, World!</h2>
  </body>
</html>

AFTER PRETTIFY

<!DOCTYPE html>
<html>
  <head>
    <title>Demo | Prettify.DART</title>
  </head>
  <body>
    <h2>Hello, World!</h2>
  </body>
</html>

7/ Wait! Make It More Prettier

You can add your own stylesheet file, e.g. prettify-[YOUR THEME].css to make the code more prettier.


<head>
    <link id="theme" rel="stylesheet" href="path/to/prettify-[YOUR THEME].css">
    <script type="text/javascript" src="packages/prettify/js/prettify.js"></script>
</head>

"prettify" provides you with some predefined styles:

  • packages/prettify/styles/light.css
  • packages/prettify/styles/desert.css
  • packages/prettify/styles/doxy.css
  • packages/prettify/styles/sons-of-obsidian.css
  • packages/prettify/styles/sunburst.css

beautify your code in different languages

You can beautify your code segment in different languages by inserting lang-[language] class. Here's an example of lang-html.

THE MARKUP

<pre class="prettyprint linenums lang-html">
&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;Demo | Prettify.DART&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;h2&gt;Hello, World!&lt;/h2&gt;
  &lt;/body&gt;
&lt;/html&gt;
</pre>

PRETTIFY FOR SPECIFIC LANGUAGE


<!DOCTYPE html> <html> <head> <title>Demo | Prettify.DART</title> </head> <body> <h2>Hello, World!</h2> </body> </html>

1/ Bash

Bash
#!/bin/bash

# Fibonacci numbers
# Writes an infinite series to stdout, one entry per line
function fib() {
  local a=1
  local b=1
  while true ; do
    echo $a
    local tmp=$a
    a=$(( $a + $b ))
    b=$tmp
  done
}

# output the 10th element of the series and halt
fib | head -10 | tail -1

2/ C

C
#include <stdio.h>

/* the nth fibonacci number. */
uint32 fib(unsigned int n) {
  uint32 a = 1, b = 1;
  uint32 tmp;
  while (--n >= 0) {
    tmp = a;
    a += b;
    b = tmp;
  }
  return a;
}

void main() {
  size_t size = sizeof(wchar_t);
  ASSERT_EQ(size, 1);
  printf("%u", fib(10));
}

#define ZERO 0 /* a
  multiline comment */

3/ C++

C++
#include <iostream>

using namespace std;

//! fibonacci numbers with gratuitous use of templates.
//! \param n an index into the fibonacci series
//! \param fib0 element 0 of the series
//! \return the nth element of the fibonacci series
template <class T>
T fib(int n, const T& fib0) {
  T a(fib0), b(fib0);
  while (--n >= 0) {
    T tmp(a);
    a += b;
    b = tmp;
  }
  return a;
}

int main(int argc, char **argv) {
  cout << fib(10, 1U);

4/ CoffeeScript

CoffeeScript
class Animal
  constructor: (@name) ->
  move: (meters, loc) ->
    alert @name + " moved " + meters + "m."
  travel: (path...) ->
    for place in path
      @move place.distance, place.location

class Horse extends Animal
  ###
  @param name Horse name
  @param jumper Jumping ability
  ###
  constructor: (name, jumper) ->
    super name
    @capable = jumper
  step: ->
    alert '''
          Step,
          step...
          '''
  jump: ->
    @capable
  move: (meters, where) ->
    switch where
      when "ground"
        @step()
        super meters
      when "hurdle"
        super meters if @jump()

# Create horse
tom = new Horse "Tommy", yes

street =
  location: "ground"
  distance: 12
car =
  location: "hurdle"
  distance: 2

###
Tell him to travel:
1. through the street
2. over the car
###
tom.travel street, car

5/ CSS

CSS
body {
  margin: 0;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  line-height: 18px;
  color: #333333;
  background-color: #ffffff;
}

a {
  color: #0088cc;
  text-decoration: none;
}

a:hover {
  color: #005580;
  text-decoration: underline;
}

6/ Dart

CSS
import 'dart:html' as html;

import 'package:logging/logging.dart';
import 'package:console_log_handler/console_log_handler.dart';

import 'package:wsk_material/wskcomponets.dart';

import 'package:prettify/prettify.dart';

void main() {
    html.querySelector("body").classes.add("update-theme");
    configLogging();

    enableTheme();
    prettyPrint();

    registerAllWskComponents();
    upgradeAllRegistered();
    html.querySelector("body").classes.remove("update-theme");
}

7/ HTML

HTML
<!doctype html>

<html lang="en">
<head>
 <meta charset="utf-8">

 <title>HTML5 Template</title>
 <meta name="description" content="HTML5 Template">
 <meta name="author" content="MikeMitterer">

 <link rel="stylesheet" href="css/styles.css?v=1.0">

 <!--[if lt IE 9]>
 <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
 <![endif]-->
</head>

<body>
 <script src="js/scripts.js"></script>
</body>
</html>

8/ Java

Java
package foo;

import java.util.Iterator;

/**
 * the fibonacci series implemented as an Iterable.
 */
public final class Fibonacci implements Iterable<Integer> {
  /** the next and previous members of the series. */
  private int a = 1, b = 1;

  @Override
  public Iterator<Integer> iterator() {
    return new Iterator<Integer>() {
      /** the series is infinite. */
      public boolean hasNext() { return true; }
      public Integer next() {
        int tmp = a;
        a += b;
        b = tmp;
        return a;
      }
      public void remove() { throw new UnsupportedOperationException(); }
    };
  }

  /**
   * the n<sup>th</sup> element of the given series.
   * @throws NoSuchElementException if there are less than n elements in the
   *   given Iterable's {@link Iterable#iterator iterator}.
   */
  public static <T>
  T nth(int n, Iterable<T> iterable) {
    Iterator<? extends T> it = iterable.iterator();
    while (--n > 0) {
      it.next();
    }
    return it.next();
  }

  public static void main(String[] args) {
    System.out.print(nth(10, new Fibonacci()));
  }
}

9/ JavaScript

JavaScript
/**
 * nth element in the fibonacci series.
 * @param n >= 0
 * @return the nth element, >= 0.
 */
function fib(n) {
  var a = 1, b = 1;
  var tmp;
  while (--n >= 0) {
    tmp = a;
    a += b;
    b = tmp;
  }
  return a;
}

document.write(fib(10));

10/ Perl

Perl
#!/usr/bin/perl

use strict;
use integer;

# the nth element of the fibonacci series
# param n - an int >= 0
# return an int >= 0
sub fib($) {
  my $n = shift, $a = 1, $b = 1;
  ($a, $b) = ($a + $b, $a) until (--$n < 0);
  return $a;
}

print fib(10);

11/ PHP

PHP
<html>
  <head>
    <title><?= 'Fibonacci numbers' ?></title>

    <?php
      // PHP has a plethora of comment types
      /* What is a
         "plethora"? */
      function fib($n) {
        # I don't know.
        $a = 1;
        $b = 1;
        while (--$n >= 0) {
          echo "$a\n";
          $tmp = $a;
          $a += $b;
          $b = $tmp;
        }
      }
    ?>
  </head>
  <body>
    <?= fib(10) ?>
  </body>
</html>

12/ Python

Python
#!/usr/bin/python2.4

def fib():
  '''
  a generator that produces the fibonacci series's elements
  '''

  a = 1
  b = 1
  while True:
    a, b = a + b, a
    yield a

def nth(series, n):
  '''
  returns the nth element of a series,
  consuming the series' earlier elements.
  '''

  for x in series:
    n -= 1
    if n <= 0: return x

print nth(fib(), 10)

/* not a comment and not keywords: null char true */

13/ SQL

SQL
/* A multi-line
 * comment */
'Another string /* Isn\'t a comment',
"A string */"
-- A line comment
SELECT * FROM users WHERE id IN (1, 2.0, +30e-1);
-- keywords are case-insensitive.
-- Note: user-table is a single identifier, not a pair of keywords
select * from user-table where id in (x, y, z);

14/ XHTML

XHTML
<xhtml>
  <head>
    <title>Fibonacci number</title>
  </head>
  <body onload="alert(fib(10))">
    <script type="text/javascript"><![CDATA[
function fib(n) {
  var a = 1, b = 1;
  var tmp;
  while (--n >= 0) {
    tmp = a;
    a += b;
    b = tmp;
  }
  return a;
}
]]>
    </script>
  </body>
</xhtml>

15/ XML

XML
<!DOCTYPE series PUBLIC "fibonacci numbers">

<series.root base="1" step="s(n-2) + s(n-1)">
  <element i="0">1</element>
  <element i="1">1</element>
  <element i="2">2</element>
  <element i="3">3</element>
  <element i="4">5</element>
  <element i="5">8</element>
  ...
</series.root>

16/ XSL

XSL
<!-- Test elements and attributes with namespaces -->

<xsl:stylesheet xml:lang="en">
  <xsl:template match=".">
    <xsl:text>Hello World</xsl:text>
  </xsl:template>
</xsl:stylesheet>

17/ YAML

XSL
name: 'myapp'
version: 0.0.1
description: An absolute bare-bones web app.
#author: <your name> <email@example.com>
#homepage: https://www.example.com

     environment:
     sdk: '>=1.0.0 <2.0.0'

     dependencies:
     browser: any

     prettify: any

For this page I've used Web Starter Kit - Material style for Dart
Stanley provided me with some samples and I took some of his "howto's" for this page - Thanks!