mirror of https://github.com/akveo/blur-admin
Vladimir Lugovsky
9 years ago
parent
490c5b0ab6
commit
de12e97c52
@ -0,0 +1,43 @@
|
||||
---
|
||||
title: Getting Started
|
||||
author: vl
|
||||
sort: 999
|
||||
group: Quick Start
|
||||
template: article.jade
|
||||
---
|
||||
|
||||
## What is BlurAdmin?
|
||||
|
||||
Blur admin is Angular front-end Admin Dashboard template. That means all data you can see on graphs, charts tables is hardcoded in Javascript. You can use any backend you want with it without limitations.
|
||||
|
||||
## How can it help me?
|
||||
|
||||
We believe that that at the moment a lot of business applications have some kind of admin interface inside of them. Sometimes it's not that obvious, but a lot of web applications have dashboard with panels, charts analytics.
|
||||
|
||||
BlurAdmin aims to bootstrap development of your product and provide ecosystem for building a prototype or even production-ready application.
|
||||
|
||||
Despite frameworks like Bootstrap provide a number of components, usually it's not enough of them to build real-world app. This template comes with lots of popular UI components with unified color scheme.
|
||||
|
||||
As well you can use BlurAdmin for learning purposes.
|
||||
|
||||
## List of features
|
||||
|
||||
* Responsive layout
|
||||
* High resolution
|
||||
* Bootstrap CSS Framework
|
||||
* Sass
|
||||
* Gulp build
|
||||
* AngularJS
|
||||
* Jquery
|
||||
* Jquery ui
|
||||
* Charts (amChart, Chartist, Chart.js, Morris)
|
||||
* Maps (Google, Leaflet, amMap)
|
||||
* etc
|
||||
|
||||
## I want to start developing with BlurAdmin
|
||||
|
||||
Welcome abroad!
|
||||
|
||||
You can start with [Installation Guidelines](/blur-admin/articles/002-installation-guidelines/). We describe there how can you download and run template on you local machine.
|
||||
|
||||
Good luck and have fun!
|
||||
@ -0,0 +1,46 @@
|
||||
---
|
||||
title: Installation Guidelines
|
||||
author: vl
|
||||
sort: 500
|
||||
group: Quick Start
|
||||
template: article.jade
|
||||
---
|
||||
|
||||
## Prerequisites
|
||||
|
||||
Despite BlurAdmin can be run without any development experience, it would be much easier if you already know something about it. In general following instruction do allow to run local copy by complete newbie, but it doesn't answer questions that can arise in the process of installation.
|
||||
|
||||
## Install tools
|
||||
|
||||
If you don't havee any of these tools installed already, you will need to:
|
||||
* Download and install [git](https://git-scm.com/)
|
||||
* Download and install nodejs [https://nodejs.org](https://nodejs.org)
|
||||
|
||||
**Note**: It seems like there are some problems with some libraries used in this template and old node versions. That's why we suggest you to have one of the latest.
|
||||
|
||||
## Clone repository and install dependencies
|
||||
|
||||
You will need to clone source code of BlurAdmin GitHub repository. To do this open console and execute following lines:
|
||||
```bash
|
||||
git clone https://github.com/akveo/blur-admin.git
|
||||
```
|
||||
After repository is cloned, go inside of repository directory and install dependencies there:
|
||||
```bash
|
||||
cd blur-admin
|
||||
npm install
|
||||
```
|
||||
This will setup a working copy of BlurAdmin on your local machine
|
||||
|
||||
## Running local copy
|
||||
|
||||
To run local copy in development mode, execute:
|
||||
```bash
|
||||
gulp serve
|
||||
```
|
||||
This script should automatically open template in your default browser.
|
||||
|
||||
To run local copy in production mode, execute:
|
||||
```bash
|
||||
gulp serve:dist
|
||||
```
|
||||
For addition information about build, please check out [this angular generator](https://github.com/Swiip/generator-gulp-angular)
|
||||
@ -0,0 +1,50 @@
|
||||
---
|
||||
title: Changing Color Scheme
|
||||
author: vl
|
||||
sort: 900
|
||||
group: Customization
|
||||
template: article.jade
|
||||
---
|
||||
|
||||
If you want to change template color scheme, you just need to do 4 simple steps:
|
||||
|
||||
1) Change color scheme in javascript (`src/app/theme/theme.constants.js`):
|
||||
```javascript
|
||||
// main color scheme
|
||||
var colorScheme = {
|
||||
primary: '#209e91',
|
||||
info: '#2dacd1',
|
||||
success: '#90b900',
|
||||
warning: '#dfb81c',
|
||||
danger: '#e85656',
|
||||
};
|
||||
|
||||
// background color palette
|
||||
var bgColorPalette = {
|
||||
blueStone: '#005562',
|
||||
surfieGreen: '#0e8174',
|
||||
silverTree: '#6eba8c',
|
||||
gossip: '#b9f2a1',
|
||||
white: '#ffffff',
|
||||
};
|
||||
```
|
||||
- css colors and javascript colors in colorScheme object should be the same
|
||||
- background color palette is used for the pie traffic chart and calendar on the dashboard page
|
||||
|
||||
2) Change colors in css (`src/sass/theme/conf/_colorScheme.scss`):
|
||||
|
||||
```scss
|
||||
$primary: #209e91 !default;
|
||||
$info: #2dacd1 !default;
|
||||
$success: #90b900 !default;
|
||||
$warning: #dfb81c !default;
|
||||
$danger: #e85656 !default;
|
||||
```
|
||||
|
||||
3) Replace background images: `src/app/assets/img/blur-bg.jpg` and `src/app/assets/img/blur-bg-blurred.jpg`
|
||||
|
||||
4) build source files and run application: `gulp` and `gulp serve`
|
||||
|
||||
Below is an example of template with another color scheme:
|
||||
|
||||
|
||||
|
After Width: | Height: | Size: 252 KiB |
@ -0,0 +1,33 @@
|
||||
---
|
||||
title: Project Structure
|
||||
author: vl
|
||||
sort: 800
|
||||
group: Customization
|
||||
template: article.jade
|
||||
---
|
||||
|
||||
Project structure was originally based on [this angular generator](https://github.com/Swiip/generator-gulp-angular). We made some changes we thought would be better for our particular problem.
|
||||
|
||||
The directory structure of this template is as follows:
|
||||
```
|
||||
├── bower.json <- front-end library dependencies
|
||||
├── gulpfile.js <- main task runner file
|
||||
├── package.json <- mostly task runner dependencies
|
||||
├── docs/ <- wintersmith documentation generator
|
||||
├── gulp/ <- build tasks
|
||||
├── src/ <- main front-end assets
|
||||
│ ├── 404.html
|
||||
│ ├── auth.html
|
||||
│ ├── index.html <- main app dashboard page
|
||||
│ ├── reg.html
|
||||
│ ├── app/ <- angular application files
|
||||
│ │ ├── app.js <- angular application entry point. Used for managing dependencies
|
||||
│ │ ├── pages/ <- UI router pages. Pages created for demonstration purposes. Put your application js and html files here
|
||||
│ │ ├── theme/ <- theme components. Contains various common widgets, panels which used across application
|
||||
│ ├── assets/ <- static files (images, fonts etc.)
|
||||
│ ├── sass/ <- sass styles
|
||||
│ │ ├── app/ <- application styles. Used mostly for demonstration purposes. Put your app styles here.
|
||||
│ │ ├── theme/ <- theme styles. Used to customize bootstrap and other common components used in tempate.
|
||||
```
|
||||
|
||||
In our template we tried to separate theme layer and presentation layer. We believe most of other templates have them combined. That's why when you start developing using them, it gets very hard for you to remove things you don't need. Though we understand that our structure is not ideal, but we're aiming to make it as good as possible.
|
||||
@ -1,134 +0,0 @@
|
||||
---
|
||||
title: Code and stuff!
|
||||
author: the-wintersmith
|
||||
sort: 100
|
||||
group: First Group
|
||||
template: article.jade
|
||||
---
|
||||
|
||||
Syntax highlighting with [highlight.js](http://softwaremaniacs.org/soft/highlight/en/).
|
||||
The theme used is tomorrow, you can find more themes [here](http://jmblog.github.io/color-themes-for-highlightjs/).
|
||||
|
||||
<span class="more"></span>
|
||||
|
||||
### JavaScript
|
||||
|
||||
```javascript
|
||||
function getRandomNumber() {
|
||||
return 4; // chosen by fair dice roll.
|
||||
// guaranteed to be random.
|
||||
}
|
||||
```
|
||||
|
||||
### CoffeeScript
|
||||
|
||||
```coffeescript
|
||||
class Animal
|
||||
### Intellegent design ###
|
||||
getDNA: ->
|
||||
print 'sequencing...'
|
||||
while true
|
||||
sleep 1
|
||||
|
||||
class Monkey extends Animal
|
||||
speak: ->
|
||||
print 'ah ah ah'
|
||||
|
||||
class Human extends Monkey
|
||||
speak: ->
|
||||
print ['yolo' unless i % 3] + ['swag' unless i % 5] or i for i in [1..100]
|
||||
```
|
||||
|
||||
### C
|
||||
|
||||
```c
|
||||
#include <stdio.h>
|
||||
|
||||
int main(void)
|
||||
{
|
||||
printf("Hello world\n");
|
||||
return 0;
|
||||
}
|
||||
```
|
||||
|
||||
### C++
|
||||
|
||||
```cpp
|
||||
#include <iostream>
|
||||
|
||||
int main()
|
||||
{
|
||||
std::cout << "Hello World!" << std::endl;
|
||||
return 0;
|
||||
}
|
||||
```
|
||||
|
||||
### C-sharp
|
||||
|
||||
```cs
|
||||
class ExampleClass
|
||||
{
|
||||
static void Main()
|
||||
{
|
||||
System.Console.WriteLine("Hello, world!");
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Erlang
|
||||
|
||||
```erlang
|
||||
io:format("~s~n", ["hello, world"])
|
||||
```
|
||||
|
||||
### Go
|
||||
|
||||
```go
|
||||
package main
|
||||
|
||||
import "fmt"
|
||||
|
||||
func main() {
|
||||
fmt.Println("Hello World!")
|
||||
}
|
||||
```
|
||||
|
||||
### Java
|
||||
|
||||
```java
|
||||
public class HelloWorld {
|
||||
public static void main(String[] args) {
|
||||
System.out.println("Hello world!");
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### ObjectiveC
|
||||
|
||||
```objectivec
|
||||
#import <stdio.h>
|
||||
|
||||
int main(void)
|
||||
{
|
||||
printf("Hello, World!\n");
|
||||
return 0;
|
||||
}
|
||||
```
|
||||
|
||||
### PHP
|
||||
|
||||
```php
|
||||
<?php echo 'Hello, world'; ?>
|
||||
```
|
||||
|
||||
### Python
|
||||
|
||||
```python
|
||||
print("Hello World")
|
||||
```
|
||||
|
||||
### Ruby
|
||||
|
||||
```ruby
|
||||
puts "Hello world!"
|
||||
```
|
||||
@ -1,185 +0,0 @@
|
||||
---
|
||||
title: "Taketori Monogatari"
|
||||
author: Princess Kaguya
|
||||
sort: 900
|
||||
group: Second Group
|
||||
template: article.jade
|
||||
---
|
||||
|
||||
Long, long ago, there lived an old bamboo wood-cutter.
|
||||
|
||||
He was very poor and sad also, for no child had Heaven sent to cheer his old age, and in his heart there was no hope of rest from work till he died and was laid in the quiet grave. Every morning he went forth into the woods and hills wherever the bamboo reared its lithe green plumes against the sky. When he had made his choice, he would cut down these feathers of the forest, and splitting them lengthwise, or cutting them into joints, would carry the bamboo wood home and make it into various articles for the household, and he and his old wife gained a small livelihood by selling them.
|
||||
|
||||
<span class="more"></span>
|
||||
|
||||
|
||||
|
||||
One morning as usual he had gone out to his work, and having found a nice clump of bamboos, had set to work to cut some of them down. Suddenly the green grove of bamboos was flooded with a bright soft light, as if the full moon had risen over the spot. Looking round in astonishment, he saw that the brilliance was streaming from one bamboo. The old man. full of wonder. dropped his ax and went towards the light. On nearer approach he saw that this soft splendor came from a hollow in the green bamboo stem, and still more wonderful to behold, in the midst of the brilliance stood a tiny human being, only three inches in height, and exquisitely beautiful in appearance.
|
||||
|
||||
"You must be sent to be my child, for I find you here among the bamboos where lies my daily work," said the old man, and taking the little creature in his hand he took it home to his wife to bring up. The tiny girl was so exceedingly beautiful and so small, that the old woman put her into a basket to safeguard her from the least possibility of being hurt in any way.
|
||||
|
||||
The old couple were now very happy, for it had been a lifelong regret that they had no children of their own, and with joy they now expended all the love of their old age on the little child who had come to them in so marvelous a manner.
|
||||
|
||||
From this time on, the old man often found gold in the notches of the bamboos when he hewed them down and cut them up; not only gold, but precious stones also, so that by degrees he became rich. He built himself a fine house, and was no longer known as the poor bamboo woodcutter, but as a wealthy man.
|
||||
|
||||
Three months passed quickly away, and in that time the bamboo child had, wonderful to say, become a full-grown girl, so her foster- parents did up her hair and dressed her in beautiful kimonos. She was of such wondrous beauty that they placed her behind the screens like a princess, and allowed no one to see her, waiting upon her themselves. It seemed as if she were made of light, for the house was filled with a soft shining, so that even in the dark of night it was like daytime. Her presence seemed to have a benign influence on those there. Whenever the old man felt sad, he had only to look upon his foster-daughter and his sorrow vanished, and he became as happy as when he was a youth.
|
||||
|
||||
At last the day came for the naming of their new-found child, so the old couple called in a celebrated name-giver, and he gave her the name of Princess Moonlight, because her body gave forth so much soft bright light that she might have been a daughter of the Moon God.
|
||||
|
||||
For three days the festival was kept up with song and dance and music. All the friends and relations of the old couple were present, and great was their enjoyment of the festivities held to celebrate the naming of Princess Moonlight. Everyone who saw her declared that there never had been seen any one so lovely; all the beauties throughout the length and breadth of the land would grow pale beside her, so they said. The fame of the Princess's loveliness spread far and wide, and many were the suitors who desired to win her hand, or even so much as to see her.
|
||||
|
||||
Suitors from far and near posted themselves outside the house, and made little holes in the fence, in the hope of catching a glimpse of the Princess as she went from one room to the other along the veranda. They stayed there day and night, sacrificing even their sleep for a chance of seeing her, but all in vain. Then they approached the house, and tried to speak to the old man and his wife or some of the servants, but not even this was granted them.
|
||||
|
||||
Still, in spite of all this disappointment they stayed on day after day, and night after night, and counted it as nothing, so great was their desire to see the Princess.
|
||||
|
||||
At last, however, most of the men, seeing how hopeless their quest was, lost heart and hope both, and returned to their homes. All except five Knights, whose ardor and determination, instead of waning, seemed to wax greater with obstacles. These five men even went without their meals, and took snatches of whatever they could get brought to them, so that they might always stand outside the dwelling. They stood there in all weathers, in sunshine and in rain.
|
||||
|
||||
Sometimes they wrote letters to the Princess, but no answer was vouchsafed to them. Then when letters failed to draw any reply, they wrote poems to her telling her of the hopeless love which kept them from sleep, from food, from rest, and even from their homes. Still Princes Moonlight gave no sign of having received their verses.
|
||||
|
||||
In this hopeless state the winter passed. The snow and frost and the cold winds gradually gave place to the gentle warmth of spring. Then the summer came, and the sun burned white and scorching in the heavens above and on the earth beneath, and still these faithful Knights kept watch and waited. At the end of these long months they called out to the old bamboo-cutter and entreated him to have some mercy upon them and to show them the Princess, but he answered only that as he was not her real father he could not insist on her obeying him against her wishes.
|
||||
|
||||
The five Knights on receiving this stern answer returned to their several homes, and pondered over the best means of touching the proud Princess's heart, even so much as to grant them a hearing. They took their rosaries in hand and knelt before their household shrines, and burned precious incense, praying to Buddha to give them their heart's desire. Thus several days passed, but even so they could not rest in their homes.
|
||||
|
||||
So again they set out for the bamboo-cutter's house. This time the old man came out to see them, and they asked him to let them know if it was the Princess's resolution never to see any man whatsoever, and they implored him to speak for them and to tell her the greatness of their love, and how long they had waited through the cold of winter and the heat of summer, sleepless and roofless through all weathers, without food and without rest, in the ardent hope of winning her, and they were willing to consider this long vigil as pleasure if she would but give them one chance of pleading their cause with her.
|
||||
|
||||
The old man lent a willing ear to their tale of love, for in his inmost heart he felt sorry for these faithful suitors and would have liked to see his lovely foster-daughter married to one of them. So he went in to Princess Moonlight and said reverently:
|
||||
|
||||
"Although you have always seemed to me to be a heavenly being, yet I have had the trouble of bringing you up as my own child and you have been glad of the protection of my roof. Will you refuse to do as I wish?"
|
||||
|
||||
Then Princess Moonlight replied that there was nothing she would not do for him, that she honored and loved him as her own father, and that as for herself she could not remember the time before she came to earth.
|
||||
|
||||
The old man listened with great joy as she spoke these dutiful words. Then he told her how anxious he was to see her safely and happily married before he died.
|
||||
|
||||
"I am an old man, over seventy years of age, and my end may come any time now. It is necessary and right that you should see these five suitors and choose one of them."
|
||||
|
||||
"Oh, why," said the Princess in distress, "must I do this? I have no wish to marry now."
|
||||
|
||||
"I found you," answered the old man, "many years ago, when you were a little creature three inches high, in the midst of a great white light. The light streamed from the bamboo in which you were hid and led me to you. So I have always thought that you were more than mortal woman. While I am alive it is right for you to remain as you are if you wish to do so, but some day I shall cease to be and who will take care of you then? Therefore I pray you to meet these five brave men one at a time and make up your mind to marry one of them!"
|
||||
|
||||
Then the Princess answered that she felt sure that she was not as beautiful as perhaps report made her out to be, and that even if she consented to marry any one of them, not really knowing her before, his heart might change afterwards. So as she did not feel sure of them, even though her father told her they were worthy Knights, she did not feel it wise to see them.
|
||||
|
||||
"All you say is very reasonable," said the old man, "but what kind of men will you consent to see? I do not call these five men who have waited on you for months, light-hearted. They have stood outside this house through the winter and the summer, often denying themselves food and sleep so that they may win you. What more can you demand?"
|
||||
|
||||
Then Princess Moonlight said she must make further trial of their love before she would grant their request to interview her. The five warriors were to prove their love by each bringing her from distant countries something that she desired to possess.
|
||||
|
||||
That same evening the suitors arrived and began to play their flutes in turn, and to sing their self-composed songs telling of their great and tireless love. The bamboo-cutter went out to them and offered them his sympathy for all they had endured and all the patience they had shown in their desire to win his foster-daughter. Then he gave them her message, that she would consent to marry whosoever was successful in bringing her what she wanted. This was to test them.
|
||||
|
||||
The five all accepted the trial, and thought it an excellent plan, for it would prevent jealousy between them.
|
||||
|
||||
Princess Moonlight then sent word to the First Knight that she requested him to bring her the stone bowl which had belonged to Buddha in India.
|
||||
|
||||
The Second Knight was asked to go to the Mountain of Horai, said to be situated in the Eastern Sea, and to bring her a branch of the wonderful tree that grew on its summit. The roots of this tree were of silver, the trunk of gold, and the branches bore as fruit white jewels.
|
||||
|
||||
The Third Knight was told to go to China and search for the fire-rat and to bring her its skin.
|
||||
|
||||
The Fourth Knight was told to search for the dragon that carried on its head the stone radiating five colors and to bring the stone to her.
|
||||
|
||||
The Fifth Knight was to find the swallow which carried a shell in its stomach and to bring the shell to her.
|
||||
|
||||
The old man thought these very hard tasks and hesitated to carry the messages, but the Princess would make no other conditions. So her commands were issued word for word to the five men who, when they heard what was required of them, were all disheartened and disgusted at what seemed to them the impossibility of the tasks given them and returned to their own homes in despair.
|
||||
|
||||
But after a time, when they thought of the Princess, the love in their hearts revived for her, and they resolved to make an attempt to get what she desired of them.
|
||||
|
||||
The First Knight sent word to the Princess that he was starting out that day on the quest of Buddha's bowl, and he hoped soon to bring it to her. But he had not the courage to go all the way to India, for in those days traveling was very difficult and full of danger, so he went to one of the temples in Kyoto and took a stone bowl from the altar there, paying the priest a large sum of money for it. He then wrapped it in a cloth of gold and, waiting quietly for three years, returned and carried it to the old man.
|
||||
|
||||
Princess Moonlight wondered that the Knight should have returned so soon. She took the bowl from its gold wrapping, expecting it to make the room full of light, but it did not shine at all, so she knew that it was a sham thing and not the true bowl of Buddha. She returned it at once and refused to see him. The Knight threw the bowl away and returned to his home in despair. He gave up now all hopes of ever winning the Princess.
|
||||
|
||||
The Second Knight told his parents that he needed change of air for his health, for he was ashamed to tell them that love for the Princess Moonlight was the real cause of his leaving them. He then left his home, at the same time sending word to the Princess that he was setting out for Mount Horai in the hope of getting her a branch of the gold and silver tree which she so much wished to have. He only allowed his servants to accompany him half-way, and then sent them back. He reached the seashore and embarked on a small ship, and after sailing away for three days he landed and employed several carpenters to build him a house contrived in such a way that no one could get access to it. He then shut himself up with six skilled jewelers, and endeavored to make such a gold and silver branch as he thought would satisfy the Princess as having come from the wonderful tree growing on Mount Horai. Every one whom he had asked declared that Mount Horai belonged to the land of fable and not to fact.
|
||||
|
||||
When the branch was finished, he took his journey home and tried to make himself look as if he were wearied and worn out with travel. He put the jeweled branch into a lacquer box and carried it to the bamboo-cutter, begging him to present it to the Princess.
|
||||
|
||||
The old man was quite deceived by the travel-stained appearance of the Knight, and thought that he had only just returned from his long journey with the branch. So he tried to persuade the Princess to consent to see the man. But she remained silent and looked very sad. The old man began to take out the branch and praised it as a wonderful treasure to be found nowhere in the whole land. Then he spoke of the Knight, how handsome and how brave he was to have undertaken a journey to so remote a place as the Mount of Horai.
|
||||
|
||||
Princess Moonlight took the branch in her hand and looked at it carefully. She then told her foster-parent that she knew it was impossible for the man to have obtained a branch from the gold and silver tree growing on Mount Horai so quickly or so easily, and she was sorry to say she believed it artificial.
|
||||
|
||||
The old man then went out to the expectant Knight, who had now approached the house, and asked where he had found the branch. Then the man did not scruple to make up a long story.
|
||||
|
||||
"Two years ago I took a ship and started in search of Mount Horai. After going before the wind for some time I reached the far Eastern Sea. Then a great storm arose and I was tossed about for many days, losing all count of the points of the compass, and finally we were blown ashore on an unknown island. Here I found the place inhabited by demons who at one time threatened to kill and eat me. However, I managed to make friends with these horrible creatures, and they helped me and my sailors to repair the boat, and I set sail again. Our food gave out, and we suffered much from sickness on board. At last, on the five-hundredth day from the day of starting, I saw far off on the horizon what looked like the peak of a mountain. On nearer approach, this proved to be an island, in the center of which rose a high mountain. I landed, and after wandering about for two or three days, I saw a shining being coming towards me on the beach, holding in his hands a golden bowl. I went up to him and asked him if I had, by good chance, found the island of Mount Horai, and he answered:"
|
||||
|
||||
"'Yes, this is Mount Horai!'"
|
||||
|
||||
"With much difficulty I climbed to the summit, here stood the golden tree growing with silver roots in the ground. The wonders of that strange land are many, and if I began to tell you about them I could never stop. In spite of my wish to stay there long, on breaking off the branch I hurried back. With utmost speed it has taken me four hundred days to get back, and, as you see, my clothes are still damp from exposure on the long sea voyage. I have not even waited to change my raiment, so anxious was I to bring the branch to the Princess quickly."
|
||||
|
||||
Just at this moment the six jewelers, who had been employed on the making of the branch, but not yet paid by the Knight, arrived at the house and sent in a petition to the Princess to be paid for their labor. They said that they had worked for over a thousand days making the branch of gold, with its silver twigs and its jeweled fruit, that was now presented to her by the Knight, but as yet they had received nothing in payment. So this Knight's deception was thus found out, and the Princess, glad of an escape from one more importunate suitor, was only too pleased to send back the branch. She called in the workmen and had them paid liberally, and they went away happy. But on the way home they were overtaken by the disappointed man. who beat them till they were nearly dead, for letting out the secret, and they barely escaped with their lives. The Knight then returned home, raging in his heart; and in despair of ever winning the Princess gave up society and retired to a solitary life among the mountains.
|
||||
|
||||
Now the Third Knight had a friend in China, so he wrote to him to get the skin of the fire-rat. The virtue of any part of this animal was that no fire could harm it. He promised his friend any amount of money he liked to ask if only he could get him the desired article. As soon as the news came that the ship on which his friend had sailed home had come into port, he rode seven days on horseback to meet him. He handed his friend a large sum of money, and received the fire-rat's skin. When he reached home he put it carefully in a box and sent it in to the Princess while he waited outside for her answer.
|
||||
|
||||
The bamboo-cutter took the box from the Knight and, as usual, carried it in to her and tried to coax her to see the Knight at once, but Princess Moonlight refused, saying that she must first put the skin to test by putting it into the fire. If it were the real thing it would not burn. So she took off the crape wrapper and opened the box, and then threw the skin into the fire. The skin crackled and burnt up at once, and the Princess knew that this man also had not fulfilled his word. So the Third Knight failed also.
|
||||
|
||||
Now the Fourth Knight was no more enterprising than the rest. Instead of starting out on the quest of the dragon bearing on its head the five-color-radiating jewel, he called all his servants together and gave them the order to seek for it far and wide in Japan and in China, and he strictly forbade any of them to return till they had found it.
|
||||
|
||||
His numerous retainers and servants started out in different directions, with no intention, however, of obeying what they considered an impossible order. They simply took a holiday, went to pleasant country places together, and grumbled at their master's unreasonableness.
|
||||
|
||||
The Knight meanwhile, thinking that his retainers could not fail to find the jewel, repaired to his house, and fitted it up beautifully for the reception of the Princess, he felt so sure of winning her.
|
||||
|
||||
One year passed away in weary waiting, and still his men did not return with the dragon-jewel. The Knight became desperate. He could wait no longer, so taking with him only two men he hired a ship and commanded the captain to go in search of the dragon; the captain and the sailors refused to undertake what they said was an absurd search, but the Knight compelled them at last to put out to sea.
|
||||
|
||||
When they had been but a few days out they encountered a great storm which lasted so long that, by the time its fury abated, the Knight had determined to give up the hunt of the dragon. They were at last blown on shore, for navigation was primitive in those days. Worn out with his travels and anxiety, the fourth suitor gave himself up to rest. He had caught a very heavy cold, and had to go to bed with a swollen face.
|
||||
|
||||
The governor of the place, hearing of his plight, sent messengers with a letter inviting him to his house. While he was there thinking over all his troubles, his love for the Princess turned to anger, and he blamed her for all the hardships he had undergone. He thought that it was quite probable she had wished to kill him so that she might be rid of him, and in order to carry out her wish had sent him upon his impossible quest.
|
||||
|
||||
At this point all the servants he had sent out to find the jewel came to see him, and were surprised to find praise instead of displeasure awaiting them. Their master told them that he was heartily sick of adventure, and said that he never intended to go near the Princess's house again in the future.
|
||||
|
||||
Like all the rest, the Fifth Knight failed in his quest--he could not find the swallow's shell.
|
||||
|
||||
By this time the fame of Princess Moonlight's beauty had reached the ears of the Emperor, and he sent one of the Court ladies to see if she were really as lovely as report said; if so he would summon her to the Palace and make her one of the ladies-in-waiting.
|
||||
|
||||
When the Court lady arrived, in spite of her father's entreaties, Princess Moonlight refused to see her. The Imperial messenger insisted, saying it was the Emperor's order. Then Princess Moonlight told the old man that if she was forced to go to the Palace in obedience to the Emperor's order, she would vanish from the earth.
|
||||
|
||||
When the Emperor was told of her persistence in refusing to obey his summons, and that if pressed to obey she would disappear altogether from sight, he determined to go and see her. So he planned to go on a hunting excursion in the neighborhood of the bamboo-cutter's house, and see the Princess himself. He sent word to the old man of his intention, and he received consent to the scheme. The next day the Emperor set out with his retinue, which he soon managed to outride. He found the bamboo-cutter's house and dismounted. He then entered the house and went straight to where the Princess was sitting with her attendant maidens.
|
||||
|
||||
Never had he seen any one so wonderfully beautiful, and he could not but look at her, for she was more lovely than any human being as she shone in her own soft radiance. When Princess Moonlight became aware that a stranger was looking at her she tried to escape from the room, but the Emperor caught her and begged her to listen to what he had to say. Her only answer was to hide her face in her sleeves.
|
||||
|
||||
The Emperor fell deeply in love with her, and begged her to come to the Court, where he would give her a position of honor and everything she could wish for. He was about to send for one of the Imperial palanquins to take her back with him at once, saying that her grace and beauty should adorn a Court, and not be hidden in a bamboo-cutter's cottage.
|
||||
|
||||
But the Princess stopped him. She said that if she were forced to go to the Palace she would turn at once into a shadow, and even as she spoke she began to lose her form. Her figure faded from his sight while he looked.
|
||||
|
||||
The Emperor then promised to leave her free if only she would resume her former shape, which she did.
|
||||
|
||||
It was now time for him to return, for his retinue would be wondering what had happened to their Royal master when they missed him for so long. So be bade her good-by, and left the house with a sad heart. Princess Moonlight was for him the most beautiful woman in the world; all others were dark beside her, and he thought of her night and day. His Majesty now spent much of his time in writing poems, telling her of his love and devotion, and sent them to her, and though she refused to see him again she answered with many verses of her own composing, which told him gently and kindly that she could never marry any one on this earth. These little songs always gave him pleasure.
|
||||
|
||||
At this time her foster-parents noticed that night after night the Princess would sit on her balcony and gaze for hours at the moon, in a spirit of the deepest dejection, ending always in a burst of tears. One night the old man found her thus weeping as if her heart were broken, and he besought her to tell him the reason of her sorrow.
|
||||
|
||||
With many tears she told him that he had guessed rightly when he supposed her not to belong to this world--that she had in truth come from the moon, and that her time on earth would soon be over. On the fifteenth day of that very month of August her friends from the moon would come to fetch her, and she would have to return. Her parents were both there, but having spent a lifetime on the earth she had forgotten them, and also the moon-world to which she belonged. It made her weep, she said, to think of leaving her kind foster- parents, and the home where she had been happy for so long.
|
||||
|
||||
When her attendants heard this they were very sad, and could not eat or drink for sadness at the thought that the Princess was so soon to leave them.
|
||||
|
||||
The Emperor, as soon as the news was carried to him, sent messengers to the house to find out if the report were true or not.
|
||||
|
||||
The old bamboo-cutter went out to meet the Imperial messengers. The last few days of sorrow had told upon the old man; he had aged greatly, and looked much more than his seventy years. Weeping bitterly, he told them that the report was only too true, but he intended, however, to make prisoners of the envoys from the moon, and to do all he could to prevent the Princess from being carried back.
|
||||
|
||||
The men returned and told His Majesty all that had passed. On the fifteenth day of that month the Emperor sent a guard of two thousand warriors to watch the house. One thousand stationed themselves on the roof, another thousand kept watch round all the entrances of the house. All were well trained archers, with bows and arrows. The bamboo-cutter and his wife hid Princess Moonlight in an inner room.
|
||||
|
||||
The old man gave orders that no one was to sleep that night, all in the house were to keep a strict watch, and be ready to protect the Princess. With these precautions, and the help of the Emperor's men- at-arms, he hoped to withstand the moon-messengers, but the Princess told him that all these measures to keep her would be useless, and that when her people came for her nothing whatever could prevent them from carrying out their purpose. Even the Emperors men would be powerless. Then she added with tears that she was very, very sorry to leave him and his wife, whom she had learned to love as her parents, that if she could do as she liked she would stay with them in their old age, and try to make some return for all the love and kindness they had showered upon her during all her earthly life.
|
||||
|
||||
The night wore on! The yellow harvest moon rose high in the heavens, flooding the world asleep with her golden light. Silence reigned over the pine and the bamboo forests, and on the roof where the thousand men-at-arms waited.
|
||||
|
||||
Then the night grew gray towards the dawn and all hoped that the danger was over--that Princess Moonlight would not have to leave them after all. Then suddenly the watchers saw a cloud form round the moon--and while they looked this cloud began to roll earthwards. Nearer and nearer it came, and every one saw with dismay that its course lay towards the house.
|
||||
|
||||
In a short time the sky was entirely obscured, till at last the cloud lay over the dwelling only ten feet off the ground. In the midst of the cloud there stood a flying chariot, and in the chariot a band of luminous beings. One amongst them who looked like a king and appeared to be the chief stepped out of the chariot, and, poised in air, called to the old man to come out.
|
||||
|
||||
"The time has come," he said, "for Princess Moonlight to return to the moon from whence she came. She committed a grave fault, and as a punishment was sent to live down here for a time. We know what good care you have taken of the Princess, and we have rewarded you for this and have sent you wealth and prosperity. We put the gold in the bamboos for you to find."
|
||||
|
||||
"I have brought up this Princess for twenty years and never once has she done a wrong thing, therefore the lady you are seeking cannot be this one," said the old man. "I pray you to look elsewhere."
|
||||
|
||||
Then the messenger called aloud, saying:
|
||||
|
||||
"Princess Moonlight, come out from this lowly dwelling. Rest not here another moment,"
|
||||
|
||||
At these words the screens of the Princess's room slid open of their own accord, revealing the Princess shining in her own radiance, bright and wonderful and full of beauty.
|
||||
|
||||
The messenger led her forth and placed her in the chariot. She looked back, and saw with pity the deep sorrow of the old man. She spoke to him many comforting words, and told him that it was not her will to leave him and that he must always think of her when looking at the moon.
|
||||
|
||||
The bamboo-cutter implored to be allowed to accompany her, but this was not allowed. The Princess took off her embroidered outer garment and gave it to him as a keepsake.
|
||||
|
||||
One of the moon beings in the chariot held a wonderful coat of wings, another had a phial full of the Elixir of Life which was given the Princess to drink. She swallowed a little and was about to give the rest to the old man, but she was prevented from doing so.
|
||||
|
||||
The robe of wings was about to be put upon her shoulders, but she said:
|
||||
|
||||
"Wait a little. I must not forget my good friend the Emperor. I must write him once more to say good-by while still in this human form."
|
||||
|
||||
In spite of the impatience of the messengers and charioteers she kept them waiting while she wrote. She placed the phial of the Elixir of Life with the letter, and, giving them to the old man, she asked him to deliver them to the Emperor.
|
||||
|
||||
Then the chariot began to roll heavenwards towards the moon, and as they all gazed with tearful eyes at the receding Princess, the dawn broke, and in the rosy light of day the moon-chariot and all in it were lost amongst the fleecy clouds that were now wafted across the sky on the wings of the morning wind.
|
||||
|
||||
Princess Moonlight's letter was carried to the Palace. His Majesty was afraid to touch the Elixir of Life, so he sent it with the letter to the top of the most sacred mountain in the land. Mount Fuji, and there the Royal emissaries burnt it on the summit at sunrise. So to this day people say there is smoke to be seen rising from the top of Mount Fuji to the clouds.
|
||||
|
Before Width: | Height: | Size: 380 KiB |
@ -1,901 +0,0 @@
|
||||
---
|
||||
title: Markdown syntax
|
||||
author: John Gruber
|
||||
sort: 1500
|
||||
group: Third Group
|
||||
template: article.jade
|
||||
---
|
||||
|
||||
Full markdown syntax taken from John Gruber's [Daring Fireball](http://daringfireball.net/projects/markdown/syntax).
|
||||
Did you know that 9 out of 10 bloggers prefer to write in markdown?
|
||||
|
||||
---
|
||||
|
||||
Markdown: Syntax
|
||||
================
|
||||
|
||||
|
||||
* [Overview](#overview)
|
||||
* [Philosophy](#philosophy)
|
||||
* [Inline HTML](#html)
|
||||
* [Automatic Escaping for Special Characters](#autoescape)
|
||||
* [Block Elements](#block)
|
||||
* [Paragraphs and Line Breaks](#p)
|
||||
* [Headers](#header)
|
||||
* [Blockquotes](#blockquote)
|
||||
* [Lists](#list)
|
||||
* [Code Blocks](#precode)
|
||||
* [Horizontal Rules](#hr)
|
||||
* [Span Elements](#span)
|
||||
* [Links](#link)
|
||||
* [Emphasis](#em)
|
||||
* [Code](#code)
|
||||
* [Images](#img)
|
||||
* [Miscellaneous](#misc)
|
||||
* [Backslash Escapes](#backslash)
|
||||
* [Automatic Links](#autolink)
|
||||
|
||||
|
||||
**Note:** This document is itself written using Markdown; you
|
||||
can [see the source for it by adding '.text' to the URL][src].
|
||||
|
||||
[src]: /projects/markdown/syntax.text
|
||||
|
||||
* * *
|
||||
|
||||
<h2 id="overview">Overview</h2>
|
||||
|
||||
<h3 id="philosophy">Philosophy</h3>
|
||||
|
||||
Markdown is intended to be as easy-to-read and easy-to-write as is feasible.
|
||||
|
||||
Readability, however, is emphasized above all else. 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. While
|
||||
Markdown's syntax has been influenced by several existing text-to-HTML
|
||||
filters -- including [Setext] [1], [atx] [2], [Textile] [3], [reStructuredText] [4],
|
||||
[Grutatext] [5], and [EtText] [6] -- the single biggest source of
|
||||
inspiration for Markdown's syntax is the format of plain text email.
|
||||
|
||||
[1]: http://docutils.sourceforge.net/mirror/setext.html
|
||||
[2]: http://www.aaronsw.com/2002/atx/
|
||||
[3]: http://textism.com/tools/textile/
|
||||
[4]: http://docutils.sourceforge.net/rst.html
|
||||
[5]: http://www.triptico.com/software/grutatxt.html
|
||||
[6]: http://ettext.taint.org/doc/
|
||||
|
||||
To this end, Markdown's syntax is comprised entirely of punctuation
|
||||
characters, which punctuation characters have been carefully chosen so
|
||||
as to look like what they mean. E.g., asterisks around a word actually
|
||||
look like \*emphasis\*. Markdown lists look like, well, lists. Even
|
||||
blockquotes look like quoted passages of text, assuming you've ever
|
||||
used email.
|
||||
|
||||
|
||||
|
||||
<h3 id="html">Inline HTML</h3>
|
||||
|
||||
Markdown's syntax is intended for one purpose: to be used as a
|
||||
format for *writing* for the web.
|
||||
|
||||
Markdown is not a replacement for HTML, or even close to it. Its
|
||||
syntax is very small, corresponding only to a very small subset of
|
||||
HTML tags. The idea is *not* to create a syntax that makes it easier
|
||||
to insert HTML tags. In my opinion, HTML tags are already easy to
|
||||
insert. The idea for Markdown is to make it easy to read, write, and
|
||||
edit prose. HTML is a *publishing* format; Markdown is a *writing*
|
||||
format. Thus, Markdown's formatting syntax only addresses issues that
|
||||
can be conveyed in plain text.
|
||||
|
||||
For any markup that is not covered by Markdown's syntax, you simply
|
||||
use HTML itself. There's no need to preface it or delimit it to
|
||||
indicate that you're switching from Markdown to HTML; you just use
|
||||
the tags.
|
||||
|
||||
The only restrictions are that block-level HTML elements -- e.g. `<div>`,
|
||||
`<table>`, `<pre>`, `<p>`, etc. -- must be separated from surrounding
|
||||
content by blank lines, and the start and end tags of the block should
|
||||
not be indented with tabs or spaces. Markdown is smart enough not
|
||||
to add extra (unwanted) `<p>` tags around HTML block-level tags.
|
||||
|
||||
For example, to add an HTML table to a Markdown article:
|
||||
|
||||
This is a regular paragraph.
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<td>Foo</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
This is another regular paragraph.
|
||||
|
||||
Note that Markdown formatting syntax is not processed within block-level
|
||||
HTML tags. E.g., you can't use Markdown-style `*emphasis*` inside an
|
||||
HTML block.
|
||||
|
||||
Span-level HTML tags -- e.g. `<span>`, `<cite>`, or `<del>` -- can be
|
||||
used anywhere in a Markdown paragraph, list item, or header. If you
|
||||
want, you can even use HTML tags instead of Markdown formatting; e.g. if
|
||||
you'd prefer to use HTML `<a>` or `<img>` tags instead of Markdown's
|
||||
link or image syntax, go right ahead.
|
||||
|
||||
Unlike block-level HTML tags, Markdown syntax *is* processed within
|
||||
span-level tags.
|
||||
|
||||
|
||||
<h3 id="autoescape">Automatic Escaping for Special Characters</h3>
|
||||
|
||||
In HTML, there are two characters that demand special treatment: `<`
|
||||
and `&`. Left angle brackets are used to start tags; ampersands are
|
||||
used to denote HTML entities. If you want to use them as literal
|
||||
characters, you must escape them as entities, e.g. `<`, and
|
||||
`&`.
|
||||
|
||||
Ampersands in particular are bedeviling for web writers. If you want to
|
||||
write about 'AT&T', you need to write '`AT&T`'. You even need to
|
||||
escape ampersands within URLs. Thus, if you want to link to:
|
||||
|
||||
http://images.google.com/images?num=30&q=larry+bird
|
||||
|
||||
you need to encode the URL as:
|
||||
|
||||
http://images.google.com/images?num=30&q=larry+bird
|
||||
|
||||
in your anchor tag `href` attribute. Needless to say, this is easy to
|
||||
forget, and is probably the single most common source of HTML validation
|
||||
errors in otherwise well-marked-up web sites.
|
||||
|
||||
Markdown allows you to use these characters naturally, taking care of
|
||||
all the necessary escaping for you. If you use an ampersand as part of
|
||||
an HTML entity, it remains unchanged; otherwise it will be translated
|
||||
into `&`.
|
||||
|
||||
So, if you want to include a copyright symbol in your article, you can write:
|
||||
|
||||
©
|
||||
|
||||
and Markdown will leave it alone. But if you write:
|
||||
|
||||
AT&T
|
||||
|
||||
Markdown will translate it to:
|
||||
|
||||
AT&T
|
||||
|
||||
Similarly, because Markdown supports [inline HTML](#html), if you use
|
||||
angle brackets as delimiters for HTML tags, Markdown will treat them as
|
||||
such. But if you write:
|
||||
|
||||
4 < 5
|
||||
|
||||
Markdown will translate it to:
|
||||
|
||||
4 < 5
|
||||
|
||||
However, inside Markdown code spans and blocks, angle brackets and
|
||||
ampersands are *always* encoded automatically. This makes it easy to use
|
||||
Markdown to write about HTML code. (As opposed to raw HTML, which is a
|
||||
terrible format for writing about HTML syntax, because every single `<`
|
||||
and `&` in your example code needs to be escaped.)
|
||||
|
||||
|
||||
* * *
|
||||
|
||||
|
||||
<h2 id="block">Block Elements</h2>
|
||||
|
||||
|
||||
<h3 id="p">Paragraphs and Line Breaks</h3>
|
||||
|
||||
A paragraph is simply one or more consecutive lines of text, separated
|
||||
by one or more blank lines. (A blank line is any line that looks like a
|
||||
blank line -- a line containing nothing but spaces or tabs is considered
|
||||
blank.) Normal paragraphs should not be indented with spaces or tabs.
|
||||
|
||||
The implication of the "one or more consecutive lines of text" rule is
|
||||
that Markdown supports "hard-wrapped" text paragraphs. This differs
|
||||
significantly from most other text-to-HTML formatters (including Movable
|
||||
Type's "Convert Line Breaks" option) which translate every line break
|
||||
character in a paragraph into a `<br />` tag.
|
||||
|
||||
When you *do* want to insert a `<br />` break tag using Markdown, you
|
||||
end a line with two or more spaces, then type return.
|
||||
|
||||
Yes, this takes a tad more effort to create a `<br />`, but a simplistic
|
||||
"every line break is a `<br />`" rule wouldn't work for Markdown.
|
||||
Markdown's email-style [blockquoting][bq] and multi-paragraph [list items][l]
|
||||
work best -- and look better -- when you format them with hard breaks.
|
||||
|
||||
[bq]: #blockquote
|
||||
[l]: #list
|
||||
|
||||
|
||||
|
||||
<h3 id="header">Headers</h3>
|
||||
|
||||
Markdown supports two styles of headers, [Setext] [1] and [atx] [2].
|
||||
|
||||
Setext-style headers are "underlined" using equal signs (for first-level
|
||||
headers) and dashes (for second-level headers). For example:
|
||||
|
||||
This is an H1
|
||||
=============
|
||||
|
||||
This is an H2
|
||||
-------------
|
||||
|
||||
Any number of underlining `=`'s or `-`'s will work.
|
||||
|
||||
Atx-style headers use 1-6 hash characters at the start of the line,
|
||||
corresponding to header levels 1-6. For example:
|
||||
|
||||
# This is an H1
|
||||
|
||||
## This is an H2
|
||||
|
||||
###### This is an H6
|
||||
|
||||
Optionally, you may "close" atx-style headers. This is purely
|
||||
cosmetic -- you can use this if you think it looks better. The
|
||||
closing hashes don't even need to match the number of hashes
|
||||
used to open the header. (The number of opening hashes
|
||||
determines the header level.) :
|
||||
|
||||
# This is an H1 #
|
||||
|
||||
## This is an H2 ##
|
||||
|
||||
### This is an H3 ######
|
||||
|
||||
|
||||
<h3 id="blockquote">Blockquotes</h3>
|
||||
|
||||
Markdown uses email-style `>` characters for blockquoting. If you're
|
||||
familiar with quoting passages of text in an email message, then you
|
||||
know how to create a blockquote in Markdown. It looks best if you hard
|
||||
wrap the text and put a `>` before every line:
|
||||
|
||||
> This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet,
|
||||
> consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus.
|
||||
> Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.
|
||||
>
|
||||
> Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse
|
||||
> id sem consectetuer libero luctus adipiscing.
|
||||
|
||||
Markdown allows you to be lazy and only put the `>` before the first
|
||||
line of a hard-wrapped paragraph:
|
||||
|
||||
> This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet,
|
||||
consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus.
|
||||
Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.
|
||||
|
||||
> Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse
|
||||
id sem consectetuer libero luctus adipiscing.
|
||||
|
||||
Blockquotes can be nested (i.e. a blockquote-in-a-blockquote) by
|
||||
adding additional levels of `>`:
|
||||
|
||||
> This is the first level of quoting.
|
||||
>
|
||||
> > This is nested blockquote.
|
||||
>
|
||||
> Back to the first level.
|
||||
|
||||
Blockquotes can contain other Markdown elements, including headers, lists,
|
||||
and code blocks:
|
||||
|
||||
> ## This is a header.
|
||||
>
|
||||
> 1. This is the first list item.
|
||||
> 2. This is the second list item.
|
||||
>
|
||||
> Here's some example code:
|
||||
>
|
||||
> return shell_exec("echo $input | $markdown_script");
|
||||
|
||||
Any decent text editor should make email-style quoting easy. For
|
||||
example, with BBEdit, you can make a selection and choose Increase
|
||||
Quote Level from the Text menu.
|
||||
|
||||
|
||||
<h3 id="list">Lists</h3>
|
||||
|
||||
Markdown supports ordered (numbered) and unordered (bulleted) lists.
|
||||
|
||||
Unordered lists use asterisks, pluses, and hyphens -- interchangably
|
||||
-- as list markers:
|
||||
|
||||
* Red
|
||||
* Green
|
||||
* Blue
|
||||
|
||||
is equivalent to:
|
||||
|
||||
+ Red
|
||||
+ Green
|
||||
+ Blue
|
||||
|
||||
and:
|
||||
|
||||
- Red
|
||||
- Green
|
||||
- Blue
|
||||
|
||||
Ordered lists use numbers followed by periods:
|
||||
|
||||
1. Bird
|
||||
2. McHale
|
||||
3. Parish
|
||||
|
||||
It's important to note that the actual numbers you use to mark the
|
||||
list have no effect on the HTML output Markdown produces. The HTML
|
||||
Markdown produces from the above list is:
|
||||
|
||||
<ol>
|
||||
<li>Bird</li>
|
||||
<li>McHale</li>
|
||||
<li>Parish</li>
|
||||
</ol>
|
||||
|
||||
If you instead wrote the list in Markdown like this:
|
||||
|
||||
1. Bird
|
||||
1. McHale
|
||||
1. Parish
|
||||
|
||||
or even:
|
||||
|
||||
3. Bird
|
||||
1. McHale
|
||||
8. Parish
|
||||
|
||||
you'd get the exact same HTML output. The point is, if you want to,
|
||||
you can use ordinal numbers in your ordered Markdown lists, so that
|
||||
the numbers in your source match the numbers in your published HTML.
|
||||
But if you want to be lazy, you don't have to.
|
||||
|
||||
If you do use lazy list numbering, however, you should still start the
|
||||
list with the number 1. At some point in the future, Markdown may support
|
||||
starting ordered lists at an arbitrary number.
|
||||
|
||||
List markers typically start at the left margin, but may be indented by
|
||||
up to three spaces. List markers must be followed by one or more spaces
|
||||
or a tab.
|
||||
|
||||
To make lists look nice, you can wrap items with hanging indents:
|
||||
|
||||
* Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
|
||||
Aliquam hendrerit mi posuere lectus. Vestibulum enim wisi,
|
||||
viverra nec, fringilla in, laoreet vitae, risus.
|
||||
* Donec sit amet nisl. Aliquam semper ipsum sit amet velit.
|
||||
Suspendisse id sem consectetuer libero luctus adipiscing.
|
||||
|
||||
But if you want to be lazy, you don't have to:
|
||||
|
||||
* Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
|
||||
Aliquam hendrerit mi posuere lectus. Vestibulum enim wisi,
|
||||
viverra nec, fringilla in, laoreet vitae, risus.
|
||||
* Donec sit amet nisl. Aliquam semper ipsum sit amet velit.
|
||||
Suspendisse id sem consectetuer libero luctus adipiscing.
|
||||
|
||||
If list items are separated by blank lines, Markdown will wrap the
|
||||
items in `<p>` tags in the HTML output. For example, this input:
|
||||
|
||||
* Bird
|
||||
* Magic
|
||||
|
||||
will turn into:
|
||||
|
||||
<ul>
|
||||
<li>Bird</li>
|
||||
<li>Magic</li>
|
||||
</ul>
|
||||
|
||||
But this:
|
||||
|
||||
* Bird
|
||||
|
||||
* Magic
|
||||
|
||||
will turn into:
|
||||
|
||||
<ul>
|
||||
<li><p>Bird</p></li>
|
||||
<li><p>Magic</p></li>
|
||||
</ul>
|
||||
|
||||
List items may consist of multiple paragraphs. Each subsequent
|
||||
paragraph in a list item must be indented by either 4 spaces
|
||||
or one tab:
|
||||
|
||||
1. This is a list item with two paragraphs. Lorem ipsum dolor
|
||||
sit amet, consectetuer adipiscing elit. Aliquam hendrerit
|
||||
mi posuere lectus.
|
||||
|
||||
Vestibulum enim wisi, viverra nec, fringilla in, laoreet
|
||||
vitae, risus. Donec sit amet nisl. Aliquam semper ipsum
|
||||
sit amet velit.
|
||||
|
||||
2. Suspendisse id sem consectetuer libero luctus adipiscing.
|
||||
|
||||
It looks nice if you indent every line of the subsequent
|
||||
paragraphs, but here again, Markdown will allow you to be
|
||||
lazy:
|
||||
|
||||
* This is a list item with two paragraphs.
|
||||
|
||||
This is the second paragraph in the list item. You're
|
||||
only required to indent the first line. Lorem ipsum dolor
|
||||
sit amet, consectetuer adipiscing elit.
|
||||
|
||||
* Another item in the same list.
|
||||
|
||||
To put a blockquote within a list item, the blockquote's `>`
|
||||
delimiters need to be indented:
|
||||
|
||||
* A list item with a blockquote:
|
||||
|
||||
> This is a blockquote
|
||||
> inside a list item.
|
||||
|
||||
To put a code block within a list item, the code block needs
|
||||
to be indented *twice* -- 8 spaces or two tabs:
|
||||
|
||||
* A list item with a code block:
|
||||
|
||||
<code goes here>
|
||||
|
||||
|
||||
It's worth noting that it's possible to trigger an ordered list by
|
||||
accident, by writing something like this:
|
||||
|
||||
1986. What a great season.
|
||||
|
||||
In other words, a *number-period-space* sequence at the beginning of a
|
||||
line. To avoid this, you can backslash-escape the period:
|
||||
|
||||
1986\. What a great season.
|
||||
|
||||
|
||||
|
||||
<h3 id="precode">Code Blocks</h3>
|
||||
|
||||
Pre-formatted code blocks are used for writing about programming or
|
||||
markup source code. Rather than forming normal paragraphs, the lines
|
||||
of a code block are interpreted literally. Markdown wraps a code block
|
||||
in both `<pre>` and `<code>` tags.
|
||||
|
||||
To produce a code block in Markdown, simply indent every line of the
|
||||
block by at least 4 spaces or 1 tab. For example, given this input:
|
||||
|
||||
This is a normal paragraph:
|
||||
|
||||
This is a code block.
|
||||
|
||||
Markdown will generate:
|
||||
|
||||
<p>This is a normal paragraph:</p>
|
||||
|
||||
<pre><code>This is a code block.
|
||||
</code></pre>
|
||||
|
||||
One level of indentation -- 4 spaces or 1 tab -- is removed from each
|
||||
line of the code block. For example, this:
|
||||
|
||||
Here is an example of AppleScript:
|
||||
|
||||
tell application "Foo"
|
||||
beep
|
||||
end tell
|
||||
|
||||
will turn into:
|
||||
|
||||
<p>Here is an example of AppleScript:</p>
|
||||
|
||||
<pre><code>tell application "Foo"
|
||||
beep
|
||||
end tell
|
||||
</code></pre>
|
||||
|
||||
A code block continues until it reaches a line that is not indented
|
||||
(or the end of the article).
|
||||
|
||||
Within a code block, ampersands (`&`) and angle brackets (`<` and `>`)
|
||||
are automatically converted into HTML entities. This makes it very
|
||||
easy to include example HTML source code using Markdown -- just paste
|
||||
it and indent it, and Markdown will handle the hassle of encoding the
|
||||
ampersands and angle brackets. For example, this:
|
||||
|
||||
<div class="footer">
|
||||
© 2004 Foo Corporation
|
||||
</div>
|
||||
|
||||
will turn into:
|
||||
|
||||
<pre><code><div class="footer">
|
||||
&copy; 2004 Foo Corporation
|
||||
</div>
|
||||
</code></pre>
|
||||
|
||||
Regular Markdown syntax is not processed within code blocks. E.g.,
|
||||
asterisks are just literal asterisks within a code block. This means
|
||||
it's also easy to use Markdown to write about Markdown's own syntax.
|
||||
|
||||
|
||||
|
||||
<h3 id="hr">Horizontal Rules</h3>
|
||||
|
||||
You can produce a horizontal rule tag (`<hr />`) by placing three or
|
||||
more hyphens, asterisks, or underscores on a line by themselves. If you
|
||||
wish, you may use spaces between the hyphens or asterisks. Each of the
|
||||
following lines will produce a horizontal rule:
|
||||
|
||||
* * *
|
||||
|
||||
***
|
||||
|
||||
*****
|
||||
|
||||
- - -
|
||||
|
||||
---------------------------------------
|
||||
|
||||
|
||||
* * *
|
||||
|
||||
<h2 id="span">Span Elements</h2>
|
||||
|
||||
<h3 id="link">Links</h3>
|
||||
|
||||
Markdown supports two style of links: *inline* and *reference*.
|
||||
|
||||
In both styles, the link text is delimited by [square brackets].
|
||||
|
||||
To create an inline link, use a set of regular parentheses immediately
|
||||
after the link text's closing square bracket. Inside the parentheses,
|
||||
put the URL where you want the link to point, along with an *optional*
|
||||
title for the link, surrounded in quotes. For example:
|
||||
|
||||
This is [an example](http://example.com/ "Title") inline link.
|
||||
|
||||
[This link](http://example.net/) has no title attribute.
|
||||
|
||||
Will produce:
|
||||
|
||||
<p>This is <a href="http://example.com/" title="Title">
|
||||
an example</a> inline link.</p>
|
||||
|
||||
<p><a href="http://example.net/">This link</a> has no
|
||||
title attribute.</p>
|
||||
|
||||
If you're referring to a local resource on the same server, you can
|
||||
use relative paths:
|
||||
|
||||
See my [About](/about/) page for details.
|
||||
|
||||
Reference-style links use a second set of square brackets, inside
|
||||
which you place a label of your choosing to identify the link:
|
||||
|
||||
This is [an example][id] reference-style link.
|
||||
|
||||
You can optionally use a space to separate the sets of brackets:
|
||||
|
||||
This is [an example] [id] reference-style link.
|
||||
|
||||
Then, anywhere in the document, you define your link label like this,
|
||||
on a line by itself:
|
||||
|
||||
[id]: http://example.com/ "Optional Title Here"
|
||||
|
||||
That is:
|
||||
|
||||
* Square brackets containing the link identifier (optionally
|
||||
indented from the left margin using up to three spaces);
|
||||
* followed by a colon;
|
||||
* followed by one or more spaces (or tabs);
|
||||
* followed by the URL for the link;
|
||||
* optionally followed by a title attribute for the link, enclosed
|
||||
in double or single quotes, or enclosed in parentheses.
|
||||
|
||||
The following three link definitions are equivalent:
|
||||
|
||||
[foo]: http://example.com/ "Optional Title Here"
|
||||
[foo]: http://example.com/ 'Optional Title Here'
|
||||
[foo]: http://example.com/ (Optional Title Here)
|
||||
|
||||
**Note:** There is a known bug in Markdown.pl 1.0.1 which prevents
|
||||
single quotes from being used to delimit link titles.
|
||||
|
||||
The link URL may, optionally, be surrounded by angle brackets:
|
||||
|
||||
[id]: <http://example.com/> "Optional Title Here"
|
||||
|
||||
You can put the title attribute on the next line and use extra spaces
|
||||
or tabs for padding, which tends to look better with longer URLs:
|
||||
|
||||
[id]: http://example.com/longish/path/to/resource/here
|
||||
"Optional Title Here"
|
||||
|
||||
Link definitions are only used for creating links during Markdown
|
||||
processing, and are stripped from your document in the HTML output.
|
||||
|
||||
Link definition names may consist of letters, numbers, spaces, and
|
||||
punctuation -- but they are *not* case sensitive. E.g. these two
|
||||
links:
|
||||
|
||||
[link text][a]
|
||||
[link text][A]
|
||||
|
||||
are equivalent.
|
||||
|
||||
The *implicit link name* shortcut allows you to omit the name of the
|
||||
link, in which case the link text itself is used as the name.
|
||||
Just use an empty set of square brackets -- e.g., to link the word
|
||||
"Google" to the google.com web site, you could simply write:
|
||||
|
||||
[Google][]
|
||||
|
||||
And then define the link:
|
||||
|
||||
[Google]: http://google.com/
|
||||
|
||||
Because link names may contain spaces, this shortcut even works for
|
||||
multiple words in the link text:
|
||||
|
||||
Visit [Daring Fireball][] for more information.
|
||||
|
||||
And then define the link:
|
||||
|
||||
[Daring Fireball]: http://daringfireball.net/
|
||||
|
||||
Link definitions can be placed anywhere in your Markdown document. I
|
||||
tend to put them immediately after each paragraph in which they're
|
||||
used, but if you want, you can put them all at the end of your
|
||||
document, sort of like footnotes.
|
||||
|
||||
Here's an example of reference links in action:
|
||||
|
||||
I get 10 times more traffic from [Google] [1] than from
|
||||
[Yahoo] [2] or [MSN] [3].
|
||||
|
||||
[1]: http://google.com/ "Google"
|
||||
[2]: http://search.yahoo.com/ "Yahoo Search"
|
||||
[3]: http://search.msn.com/ "MSN Search"
|
||||
|
||||
Using the implicit link name shortcut, you could instead write:
|
||||
|
||||
I get 10 times more traffic from [Google][] than from
|
||||
[Yahoo][] or [MSN][].
|
||||
|
||||
[google]: http://google.com/ "Google"
|
||||
[yahoo]: http://search.yahoo.com/ "Yahoo Search"
|
||||
[msn]: http://search.msn.com/ "MSN Search"
|
||||
|
||||
Both of the above examples will produce the following HTML output:
|
||||
|
||||
<p>I get 10 times more traffic from <a href="http://google.com/"
|
||||
title="Google">Google</a> than from
|
||||
<a href="http://search.yahoo.com/" title="Yahoo Search">Yahoo</a>
|
||||
or <a href="http://search.msn.com/" title="MSN Search">MSN</a>.</p>
|
||||
|
||||
For comparison, here is the same paragraph written using
|
||||
Markdown's inline link style:
|
||||
|
||||
I get 10 times more traffic from [Google](http://google.com/ "Google")
|
||||
than from [Yahoo](http://search.yahoo.com/ "Yahoo Search") or
|
||||
[MSN](http://search.msn.com/ "MSN Search").
|
||||
|
||||
The point of reference-style links is not that they're easier to
|
||||
write. The point is that with reference-style links, your document
|
||||
source is vastly more readable. Compare the above examples: using
|
||||
reference-style links, the paragraph itself is only 81 characters
|
||||
long; with inline-style links, it's 176 characters; and as raw HTML,
|
||||
it's 234 characters. In the raw HTML, there's more markup than there
|
||||
is text.
|
||||
|
||||
With Markdown's reference-style links, a source document much more
|
||||
closely resembles the final output, as rendered in a browser. By
|
||||
allowing you to move the markup-related metadata out of the paragraph,
|
||||
you can add links without interrupting the narrative flow of your
|
||||
prose.
|
||||
|
||||
|
||||
<h3 id="em">Emphasis</h3>
|
||||
|
||||
Markdown treats asterisks (`*`) and underscores (`_`) as indicators of
|
||||
emphasis. Text wrapped with one `*` or `_` will be wrapped with an
|
||||
HTML `<em>` tag; double `*`'s or `_`'s will be wrapped with an HTML
|
||||
`<strong>` tag. E.g., this input:
|
||||
|
||||
*single asterisks*
|
||||
|
||||
_single underscores_
|
||||
|
||||
**double asterisks**
|
||||
|
||||
__double underscores__
|
||||
|
||||
will produce:
|
||||
|
||||
<em>single asterisks</em>
|
||||
|
||||
<em>single underscores</em>
|
||||
|
||||
<strong>double asterisks</strong>
|
||||
|
||||
<strong>double underscores</strong>
|
||||
|
||||
You can use whichever style you prefer; the lone restriction is that
|
||||
the same character must be used to open and close an emphasis span.
|
||||
|
||||
Emphasis can be used in the middle of a word:
|
||||
|
||||
un*frigging*believable
|
||||
|
||||
But if you surround an `*` or `_` with spaces, it'll be treated as a
|
||||
literal asterisk or underscore.
|
||||
|
||||
To produce a literal asterisk or underscore at a position where it
|
||||
would otherwise be used as an emphasis delimiter, you can backslash
|
||||
escape it:
|
||||
|
||||
\*this text is surrounded by literal asterisks\*
|
||||
|
||||
|
||||
|
||||
<h3 id="code">Code</h3>
|
||||
|
||||
To indicate a span of code, wrap it with backtick quotes (`` ` ``).
|
||||
Unlike a pre-formatted code block, a code span indicates code within a
|
||||
normal paragraph. For example:
|
||||
|
||||
Use the `printf()` function.
|
||||
|
||||
will produce:
|
||||
|
||||
<p>Use the <code>printf()</code> function.</p>
|
||||
|
||||
To include a literal backtick character within a code span, you can use
|
||||
multiple backticks as the opening and closing delimiters:
|
||||
|
||||
``There is a literal backtick (`) here.``
|
||||
|
||||
which will produce this:
|
||||
|
||||
<p><code>There is a literal backtick (`) here.</code></p>
|
||||
|
||||
The backtick delimiters surrounding a code span may include spaces --
|
||||
one after the opening, one before the closing. This allows you to place
|
||||
literal backtick characters at the beginning or end of a code span:
|
||||
|
||||
A single backtick in a code span: `` ` ``
|
||||
|
||||
A backtick-delimited string in a code span: `` `foo` ``
|
||||
|
||||
will produce:
|
||||
|
||||
<p>A single backtick in a code span: <code>`</code></p>
|
||||
|
||||
<p>A backtick-delimited string in a code span: <code>`foo`</code></p>
|
||||
|
||||
With a code span, ampersands and angle brackets are encoded as HTML
|
||||
entities automatically, which makes it easy to include example HTML
|
||||
tags. Markdown will turn this:
|
||||
|
||||
Please don't use any `<blink>` tags.
|
||||
|
||||
into:
|
||||
|
||||
<p>Please don't use any <code><blink></code> tags.</p>
|
||||
|
||||
You can write this:
|
||||
|
||||
`—` is the decimal-encoded equivalent of `—`.
|
||||
|
||||
to produce:
|
||||
|
||||
<p><code>&#8212;</code> is the decimal-encoded
|
||||
equivalent of <code>&mdash;</code>.</p>
|
||||
|
||||
|
||||
|
||||
<h3 id="img">Images</h3>
|
||||
|
||||
Admittedly, it's fairly difficult to devise a "natural" syntax for
|
||||
placing images into a plain text document format.
|
||||
|
||||
Markdown uses an image syntax that is intended to resemble the syntax
|
||||
for links, allowing for two styles: *inline* and *reference*.
|
||||
|
||||
Inline image syntax looks like this:
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
That is:
|
||||
|
||||
* An exclamation mark: `!`;
|
||||
* followed by a set of square brackets, containing the `alt`
|
||||
attribute text for the image;
|
||||
* followed by a set of parentheses, containing the URL or path to
|
||||
the image, and an optional `title` attribute enclosed in double
|
||||
or single quotes.
|
||||
|
||||
Reference-style image syntax looks like this:
|
||||
|
||||
![Alt text][id]
|
||||
|
||||
Where "id" is the name of a defined image reference. Image references
|
||||
are defined using syntax identical to link references:
|
||||
|
||||
[id]: url/to/image "Optional title attribute"
|
||||
|
||||
As of this writing, Markdown has no syntax for specifying the
|
||||
dimensions of an image; if this is important to you, you can simply
|
||||
use regular HTML `<img>` tags.
|
||||
|
||||
|
||||
* * *
|
||||
|
||||
|
||||
<h2 id="misc">Miscellaneous</h2>
|
||||
|
||||
<h3 id="autolink">Automatic Links</h3>
|
||||
|
||||
Markdown supports a shortcut style for creating "automatic" links for URLs and email addresses: simply surround the URL or email address with angle brackets. What this means is that if you want to show the actual text of a URL or email address, and also have it be a clickable link, you can do this:
|
||||
|
||||
<http://example.com/>
|
||||
|
||||
Markdown will turn this into:
|
||||
|
||||
<a href="http://example.com/">http://example.com/</a>
|
||||
|
||||
Automatic links for email addresses work similarly, except that
|
||||
Markdown will also perform a bit of randomized decimal and hex
|
||||
entity-encoding to help obscure your address from address-harvesting
|
||||
spambots. For example, Markdown will turn this:
|
||||
|
||||
<address@example.com>
|
||||
|
||||
into something like this:
|
||||
|
||||
<a href="mailto:addre
|
||||
ss@example.co
|
||||
m">address@exa
|
||||
mple.com</a>
|
||||
|
||||
which will render in a browser as a clickable link to "address@example.com".
|
||||
|
||||
(This sort of entity-encoding trick will indeed fool many, if not
|
||||
most, address-harvesting bots, but it definitely won't fool all of
|
||||
them. It's better than nothing, but an address published in this way
|
||||
will probably eventually start receiving spam.)
|
||||
|
||||
|
||||
|
||||
<h3 id="backslash">Backslash Escapes</h3>
|
||||
|
||||
Markdown allows you to use backslash escapes to generate literal
|
||||
characters which would otherwise have special meaning in Markdown's
|
||||
formatting syntax. For example, if you wanted to surround a word
|
||||
with literal asterisks (instead of an HTML `<em>` tag), you can use
|
||||
backslashes before the asterisks, like this:
|
||||
|
||||
\*literal asterisks\*
|
||||
|
||||
Markdown provides backslash escapes for the following characters:
|
||||
|
||||
\ backslash
|
||||
` backtick
|
||||
* asterisk
|
||||
_ underscore
|
||||
{} curly braces
|
||||
[] square brackets
|
||||
() parentheses
|
||||
# hash mark
|
||||
+ plus sign
|
||||
- minus sign (hyphen)
|
||||
. dot
|
||||
! exclamation mark
|
||||
|
Before Width: | Height: | Size: 320 KiB |
@ -1,34 +0,0 @@
|
||||
---
|
||||
title: A red herring
|
||||
author: baker
|
||||
sort: 1400
|
||||
group: Second Group
|
||||
template: article.jade
|
||||
---
|
||||
|
||||
A long time ago, when the world was young -- someone put some food on their tongue.
|
||||
They tasted the food, and thought it was nice. Most fruit liked it -- but banana's thought twice.
|
||||
|
||||
<span class="more"></span>
|
||||
|
||||
They held a meeting at quarter past eight.
|
||||
Whilst the human's were getting home late.
|
||||
They decided they didn't want to be eaten they said:
|
||||
"No way, we're not going to be beaten".
|
||||
|
||||
So time went by, and human's got old.
|
||||
Banana's got ready, for their prophets had told.
|
||||
That soon shall come the dawn of war.
|
||||
Where humans will rule the earth no more.
|
||||
|
||||
The humans knew not of the evil banana's plans.
|
||||
They made their cars, guitars and aluminum cans.
|
||||
And the banana's began to take over the east.
|
||||
While humans knew not, and kept having their feast.
|
||||
|
||||
But time has run out, no more hiding there can be.
|
||||
Or else the banana's will kill you and me.
|
||||
We must take up arms, and fight to the end.
|
||||
Because, believe it or not, a banana is not a friend.
|
||||
|
||||
|
||||
Loading…
Reference in new issue