@charset "UTF-8";
/ CSS Document /
/* Structure /
body {
font-family: Arial, sans-serif;
margin: 0;
font-size: 14px;
}
system-error {
font-size: 1.5em;
text-align: center;
}
json, #xml {
display: none;
}
header {
position: fixed;
width: 100%;
}
specs {
padding-top: 50px;
}
header .angular {
font-family: Courier New, monospace;
font-weight: bold;
}
header h1 {
font-weight: normal;
float: left;
font-size: 30px;
line-height: 30px;
margin: 0;
padding: 10px 10px;
height: 30px;
}
application h2,
specs h2 {
margin: 0;
padding: 0.5em;
font-size: 1.1em;
}
status-legend {
margin-top: 10px;
margin-right: 10px;
}
header,
application,
.test-info,
.test-actions li {
overflow: hidden;
}
application {
margin: 10px;
}
application iframe {
width: 100%;
height: 758px;
}
application .popout {
float: right;
}
application iframe {
border: none;
}
.tests li,
.test-actions li,
.test-it li,
.test-it ol,
.status-display {
list-style-type: none;
}
.tests,
.test-it ol,
.status-display {
margin: 0;
padding: 0;
}
.test-info {
margin-left: 1em;
margin-top: 0.5em;
border-radius: 8px 0 0 8px;
-webkit-border-radius: 8px 0 0 8px;
-moz-border-radius: 8px 0 0 8px;
cursor: pointer;
}
.test-info:hover .test-name {
text-decoration: underline;
}
.test-info .closed:before {
content: '\25b8\00A0';
}
.test-info .open:before {
content: '\25be\00A0';
font-weight: bold;
}
.test-it ol {
margin-left: 2.5em;
}
.status-display,
.status-display li {
float: right;
}
.status-display li {
padding: 5px 10px;
}
.timer-result,
.test-title {
display: inline-block;
margin: 0;
padding: 4px;
}
.test-actions .test-title,
.test-actions .test-result {
display: table-cell;
padding-left: 0.5em;
padding-right: 0.5em;
}
.test-actions {
display: table;
}
.test-actions li {
display: table-row;
}
.timer-result {
width: 4em;
padding: 0 10px;
text-align: right;
font-family: monospace;
}
.test-it pre,
.test-actions pre {
clear: left;
color: black;
margin-left: 6em;
}
.test-describe {
padding-bottom: 0.5em;
}
.test-describe .test-describe {
margin: 5px 5px 10px 2em;
}
.test-actions .status-pending .test-title:before {
content: '\00bb\00A0';
}
.scrollpane {
max-height: 20em;
overflow: auto;
}
/* Colors /
header {
background-color: #F2C200;
}
specs h2 {
border-top: 2px solid #BABAD1;
}
specs h2,
application h2 {
background-color: #efefef;
}
application {
border: 1px solid #BABAD1;
}
.test-describe .test-describe {
border-left: 1px solid #BABAD1;
border-right: 1px solid #BABAD1;
border-bottom: 1px solid #BABAD1;
}
.status-display {
border: 1px solid #777;
}
.status-display .status-pending,
.status-pending .test-info {
background-color: #F9EEBC;
}
.status-display .status-success,
.status-success .test-info {
background-color: #B1D7A1;
}
.status-display .status-failure,
.status-failure .test-info {
background-color: #FF8286;
}
.status-display .status-error,
.status-error .test-info {
background-color: black;
color: white;
}
.test-actions .status-success .test-title {
color: #30B30A;
}
.test-actions .status-failure .test-title {
color: #DF0000;
}
.test-actions .status-error .test-title {
color: black;
}
.test-actions .timer-result {
color: #888;
}
Dillinger
Dillinger is a cloud-enabled, mobile-ready, offline-storage, AngularJS powered HTML5 Markdown editor.
- Type some Markdown on the left
- See HTML in the right
- Magic
You can also:
- Import and save files from GitHub, Dropbox, Google Drive and One Drive
- Drag and drop files into Dillinger
- Export documents as Markdown, HTML and PDF
Markdown is a lightweight markup language based on the formatting conventions that people naturally use in email. As [John Gruber] writes on the [Markdown site][df1]
> The overriding design goal for Markdown's
> formatting syntax is to make it as readable
> as possible. The idea is that a
> Markdown-formatted document should be
> publishable as-is, as plain text, without
> looking like it's been marked up with tags
> or formatting instructions.
This text you see here is actually written in Markdown! To get a feel for Markdown's syntax, type some text into the left window and watch the results in the right.
Tech
Dillinger uses a number of open source projects to work properly:
- [AngularJS] - HTML enhanced for web apps!
- [Ace Editor] - awesome web-based text editor
- [markdown-it] - Markdown parser done right. Fast and easy to extend.
- [Twitter Bootstrap] - great UI boilerplate for modern web apps
- [node.js] - evented I/O for the backend
- [Express] - fast node.js network app framework [@tjholowaychuk]
- [Gulp] - the streaming build system
- [keymaster.js] - awesome keyboard handler lib by [@thomasfuchs]
- [jQuery] - duh
And of course Dillinger itself is open source with a [public repository][dill]
on GitHub.
Installation
Dillinger requires Node.js v4+ to run.
Download and extract the latest pre-built release.
Install the dependencies and devDependencies and start the server.
$ cd dillinger
$ npm install -d
$ node appFor production environments...
$ npm install --production
$ npm run predeploy
$ NODE_ENV=production node appPlugins
Dillinger is currently extended with the following plugins
- Dropbox
- Github
- Google Drive
- OneDrive
Readmes, how to use them in your own application can be found here:
- [plugins/dropbox/README.md] [PlDb]
- [plugins/github/README.md] [PlGh]
- [plugins/googledrive/README.md] [PlGd]
- [plugins/onedrive/README.md] [PlOd]
Development
Want to contribute? Great!
Dillinger uses Gulp + Webpack for fast developing.
Make a change in your file and instantanously see your updates!
Open your favorite Terminal and run these commands.
First Tab:
$ node appSecond Tab:
$ gulp watch(optional) Third:
$ karma startBuilding for source
For production release:
$ gulp build --prodGenerating pre-built zip archives for distribution:
$ gulp build dist --prodDocker
Dillinger is very easy to install and deploy in a Docker container.
By default, the Docker will expose port 80, so change this within the Dockerfile if necessary. When ready, simply use the Dockerfile to build the image.
cd dillinger
npm run-script build-dockerThis will create the dillinger image and pull in the necessary dependencies. Moreover, this uses a hack to get a more optimized
npm build by copying the dependencies over and only installing when the package.json itself has changed. Look inside the package.json and the Dockerfile for more details on how this works.Once done, run the Docker image and map the port to whatev