Beautify the code snippets in your web page.
The code for this Dart-Package ist hosted on GitHub
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
You can install packages from the command line:
$ pub get
<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>
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"> <!DOCTYPE html> <html> <head> <title>Demo | Prettify</title> </head> <body> <h2>Hello, World!</h2> </body> </html> </pre>
<pre>
are encoded.import 'package:prettify/prettify.dart'; void main() { prettyPrint(); }
<!DOCTYPE html> <html> <head> <title>Demo | Prettify.DART</title> </head> <body> <h2>Hello, World!</h2> </body> </html>
<!DOCTYPE html> <html> <head> <title>Demo | Prettify.DART</title> </head> <body> <h2>Hello, World!</h2> </body> </html>
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:
You can beautify your code segment in different languages by inserting
lang-[language]
class. Here's an example of lang-html
.
<pre class="prettyprint linenums lang-html"> <!DOCTYPE html> <html> <head> <title>Demo | Prettify.DART</title> </head> <body> <h2>Hello, World!</h2> </body> </html> </pre>
<!DOCTYPE html> <html> <head> <title>Demo | Prettify.DART</title> </head> <body> <h2>Hello, World!</h2> </body> </html>
#!/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
#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 */
#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);
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
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; }
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"); }
<!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>
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())); } }
/** * 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));
#!/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);
<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>
#!/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 */
/* 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);
<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>
<!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>
<!-- Test elements and attributes with namespaces --> <xsl:stylesheet xml:lang="en"> <xsl:template match="."> <xsl:text>Hello World</xsl:text> </xsl:template> </xsl:stylesheet>
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