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>