realfish / hackerlink-design-playground Goto Github PK

// Import
import { ApiPromise, WsProvider } from '@polkadot/api';

...
// Construct
const wsProvider = new WsProvider('wss://rpc.polkadot.io');
const api = await ApiPromise.create({ provider: wsProvider });

// Do something
console.log(api.genesisHash.toHex());

ApiPromise
  .create({ provider: wsProvider }).isReady
  .then((api) =>
    console.log(api.genesisHash.toHex())
  );

// Create the instance
const api = new ApiPromise({ provider: wsProvider });

// Wait until we are ready and connected
await api.isReady;

// Do something
console.log(api.genesisHash.toHex());

Python

from django.db import models

class Question(models.Model):
    question_text = models.CharField(max_length=200)
    pub_date = models.DateTimeField('date published')

class Choice(models.Model):
    question = models.ForeignKey(Question, on_delete=models.CASCADE)
    choice_text = models.CharField(max_length=200)
    votes = models.IntegerField(default=0)

INSTALLED_APPS = [
    'polls.apps.PollsConfig',
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
]

from django.db import models

class Question(models.Model):
    # ...
    def __str__(self):
        return self.question_text

class Choice(models.Model):
    # ...
    def __str__(self):
        return self.choice_text

import datetime

from django.db import models
from django.utils import timezone

class Question(models.Model):
    # ...
    def was_published_recently(self):
        return self.pub_date >= timezone.now() - datetime.timedelta(days=1)

Ruby

Rails.application.routes.draw do
  root "articles#index"

  get "/articles", to: "articles#index"
  get "/articles/:id", to: "articles#show"
end

class ArticlesController < ApplicationController
  def index
    @articles = Article.all
  end

  def show
    @article = Article.find(params[:id])
  end

  def new
    @article = Article.new
  end

  def create
    @article = Article.new(article_params)

    if @article.save
      redirect_to @article
    else
      render :new
    end
  end

  private
    def article_params
      params.require(:article).permit(:title, :body)
    end
end

class CommentsController < ApplicationController
  def create
    @article = Article.find(params[:article_id])
    @comment = @article.comments.create(comment_params)
    redirect_to article_path(@article)
  end

  private
    def comment_params
      params.require(:comment).permit(:commenter, :body)
    end
end

module Visible
  def archived?
    status == 'archived'
  end
end

C++

// Complex numbers are entered by the user

#include <iostream>
using namespace std;

typedef struct complex {
    float real;
    float imag;
} complexNumber;

complexNumber addComplexNumbers(complex, complex);

int main() {
    complexNumber num1, num2, complexSum;
    char signOfImag;

    cout << "For 1st complex number," << endl;
    cout << "Enter real and imaginary parts respectively:" << endl;
    cin >> num1.real >> num1.imag;

    cout << endl
         << "For 2nd complex number," << endl;
    cout << "Enter real and imaginary parts respectively:" << endl;
    cin >> num2.real >> num2.imag;

    // Call add function and store result in complexSum
    complexSum = addComplexNumbers(num1, num2);

    // Use Ternary Operator to check the sign of the imaginary number
    signOfImag = (complexSum.imag > 0) ? '+' : '-';

    // Use Ternary Operator to adjust the sign of the imaginary number
    complexSum.imag = (complexSum.imag > 0) ? complexSum.imag : -complexSum.imag;

    cout << "Sum = " << complexSum.real << signOfImag << complexSum.imag << "i";

    return 0;
}

complexNumber addComplexNumbers(complex num1, complex num2) {
    complex temp;
    temp.real = num1.real + num2.real;
    temp.imag = num1.imag + num2.imag;
    return (temp);
}

Solidity

// SPDX-License-Identifier: GPL-3.0
pragma solidity >=0.4.0 <0.9.0;

// State Variables
contract SimpleStorage {
    uint storedData; // State variable
    // ...
}

// Functions
contract SimpleAuction {
    function bid() public payable { // Function
        // ...
    }
}

// Helper function defined outside of a contract
function helper(uint x) pure returns (uint) {
    return x * 2;
}

// Function Modifiers
contract Purchase {
    address public seller;

    modifier onlySeller() { // Modifier
        require(
            msg.sender == seller,
            "Only seller can call this."
        );
        _;
    }

    function abort() public view onlySeller { // Modifier usage
        // ...
    }
}

// Struct Types
contract Ballot {
    struct Voter { // Struct
        uint weight;
        bool voted;
        address delegate;
        uint vote;
    }
}

// Enum Types
contract Purchase {
    enum State { Created, Locked, Inactive } // Enum
}

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Dora Research Blog</title>
    <meta name="title" content="Dora Research Blog">
    <meta name="description" content="Dora Research Blog">
    <meta name="keywords" content="doraresearch,dora,research,testbench,prototype,ui,design,playground">
    <meta name="viewport" content="width=device-width, viewport-fit=cover,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="default">
    <meta name="format-detection" content="telephone=no">
    <meta name="apple-mobile-web-app-title" content="Dora Research">
    <meta name="theme-color" content="#110920">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link rel="shortcut icon" href="./assets/favicon.ico?v=0.1.0">
    <link rel="icon" sizes="16x16 24x24 32x32 48x48 64x64" href="./assets/favicon.ico?v=0.1.0">
    <link rel="icon" sizes="128x128" href="./assets/favicon-128.png?v=0.1.0">
    <link rel="icon" sizes="192x192" href="./assets/favicon-192.png?v=0.1.0">
    <link rel="icon" sizes="196x196" href="./assets/favicon-196.png?v=0.1.0">
    <link rel="apple-touch-icon" href="./assets/favicon-180.png?v=0.1.0">
    <link rel="apple-touch-icon" sizes="120x120" href="./assets/favicon-120.png?v=0.1.0">
    <link rel="apple-touch-icon" sizes="152x152" href="./assets/favicon-152.png?v=0.1.0">
    <link rel="apple-touch-icon" sizes="167x167" href="./assets/favicon-167.png?v=0.1.0">
    <link rel="apple-touch-icon" sizes="180x180" href="./assets/favicon-180.png?v=0.1.0">
    <meta name="msapplication-TileColor" content="#110920">
    <meta name="msapplication-TileImage" content="./assets/favicon-144.png">
    <meta name="application-name" content="❤︎">
    <meta name="msapplication-tooltip" content="❤︎">
    <meta name="msapplication-config" content="./assets/ieconfig.xml">
    <link rel="preload" href="./assets/IBMPlexSans-Text.woff2" as="font" type="font/woff2" crossorigin>
    <link rel="preload" href="./assets/IBMPlexSans-TextItalic.woff2" as="font" type="font/woff2" crossorigin>
    <link rel="preload" href="./assets/IBMPlexSans-SemiBold.woff2" as="font" type="font/woff2" crossorigin>
    <link rel="preload" href="./assets/IBMPlexSans-SemiBoldItalic.woff2" as="font" type="font/woff2" crossorigin>
    <link rel="preload" href="./assets/IBMPlexSans-Bold.woff2" as="font" type="font/woff2" crossorigin>
    <link rel="preload" href="./assets/IBMPlexSans-BoldItalic.woff2" as="font" type="font/woff2" crossorigin>
    <link rel="stylesheet" href="./assets/highlight-theme.css?v=0.1.0">
    <link rel="stylesheet" href="./assets/app.css?v=0.1.0">
    <meta name="generator" content="Hexo 5.4.0">
  </head>
  <body class="index">
    <main class="grid-main" role="main">
      <header class="index-brand brand">
        <h1 class="brand-main">Dora Research <span class="brand-sub">Blog</span>
        </h1>
      </header>
      <section class="index-toc toc">
        <ul class="toc-list">
          <li class="toc-item">
            <div class="toc-metadata">
              <p class="toc-date">
                <time datetime="2021-10-17T00:00:00.000Z">17 Oct 2021</time>
              </p>
              <p class="toc-author">Eric Zhang</p>
            </div>
            <h3 class="toc-title">
              <a href="./2021/10/17/decentralize-the-hacker-movement/">Decentralize The Hacker Movement</a>
            </h3>
          </li>
          <li class="toc-item">
            <div class="toc-metadata">
              <p class="toc-date">
                <time datetime="2020-12-14T00:00:00.000Z">14 Dec 2020</time>
              </p>
              <p class="toc-author">Eric Zhang</p>
            </div>
            <h3 class="toc-title">
              <a href="./2020/12/14/quadratic-voting-funding/">二次方投票和二次方资助</a>
            </h3>
          </li>
        </ul>
      </section>
      <nav class="index-category aside-category">
        <h5 class="aside-caption">Category</h5>
        <ul class="aside-category-list">
          <li class="aside-category-item">
            <a href="/category/hackathon-dao/">Hackathon DAO</a>
          </li>
          <li class="aside-category-item">
            <a href="/category/governance/">Governance</a>
          </li>
          <li class="aside-category-item">
            <a href="/category/economics/">Economics</a>
          </li>
          <li class="aside-category-item">
            <a href="/category/blockchain/">Blockchain</a>
          </li>
          <li class="aside-category-item">
            <a href="/category/hackerlink/">HackerLink</a>
          </li>
          <li class="aside-category-item">
            <a href="/category/quadratic-funding/">Quadratic Funding</a>
          </li>
          <li class="aside-category-item">
            <a href="/category/continuous-funding/">Continuous Funding</a>
          </li>
          <li class="aside-category-item">
            <a href="/category/daorayaki/">DAOrayaki</a>
          </li>
          <li class="aside-category-item">
            <a href="/category/english/">English</a>
          </li>
          <li class="aside-category-item">
            <a href="/category/chinese/">中文</a>
          </li>
        </ul>
      </nav>
      <footer class="index-copyright aside-copyright">
        <p class="aside-copyright-info">Copyright © 2021</p>
      </footer>
    </main>
    <script type="text/javascript" src="./assets/app.js?v=0.1.0"></script>
  </body>
</html>

Less

/*************************
 * Define Less variables
 *************************/

// Color scheme
@ink-main   : hsla(260, 55%,   8%,   1);
@ink-sub    : hsla(260, 55%,   8%,   0.57);
@ink-line   : hsla(260, 55%,   8%,   0.1);
@bg-main    : hsla(260, 55%, 100%,   1);
@accent     : hsla(260, 95%,  52.5%, 1);
@accent-p3  : ~"color(display-p3 0.343 0.1002 0.9378)";

//--- Typeface ---//
// Plex
@font-face {
	font-family: 'IBM Plex Sans';
	font-style: normal;
	font-weight: 400;
	font-display: fallback;
	src: /* local("IBM Plex Sans Text"), local("IBMPlexSans-Text"),  */url("IBMPlexSans-Text.woff2") format("woff2"), url("IBMPlexSans-Text.woff") format("woff");
}
@font-face {
	font-family: 'IBM Plex Sans';
	font-style: italic;
	font-weight: 400;
	font-display: fallback;
	src: /* local("IBM Plex Sans Text Italic"), local("IBMPlexSans-TextItalic"),  */url("IBMPlexSans-TextItalic.woff2") format("woff2"), url("IBMPlexSans-TextItalic.woff") format("woff");
}

@font-en: "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
@font-zh: "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei UI", "Microsoft YaHei", sans-serif;
//--- Typeface END ---//

// Font weights
@regular : 400;
@semibold: 600;
@bold    : 700;

// Typographic sizes for article header & body
// - Em size: pixel size of 1-em
// - Leading: aka line-height
@emsize     : 18px;
@leading    : 28px;
@emsize-sub : 14px;
@leading-sub: 21px;

// z-Axis levels
@zIndex-0: 0;
@zIndex-1: 100;
@zIndex-2: 200;
@zIndex-3: 300;
@zIndex-4: 400;
@zIndex-5: 500;
@zIndex-6: 600;
@zIndex-7: 700;
@zIndex-8: 800;
@zIndex-9: 900;

// Breakpoints
// Define the values of max-width. Value of min-width is (@bp-foo + 1px).
@bp-mobile    : 600px;
@bp-desktop   : 1600px;
@bp-desktop--s: 1200px;

/*************************
 * Define Less mixins
 *************************/

// 0.5px lines
.line-halfpx--vert() {
	width           : 1px;
	height          : unset;
	background-size : 100% 1px;
	background-image: linear-gradient(
		to right,
		@ink-main    0%,
		@ink-main   51%,
		transparent 51%
	);
}
.line-halfpx--hori() {
	width           : unset;
	height          : 1px;
	background-size : 100% 1px;
	background-image: linear-gradient(
		to bottom,
		@ink-main    0%,
		@ink-main   51%,
		transparent 51%
	);
}

// Glass
.glass-nav() {
	background-color: fadeout(@bg-main, 20%);
	backdrop-filter : blur(24px);
}

// Pseudo navbar chrome: bg & line
.pseduo-navbar() {
	&::before {
		content : "";
		position: fixed;
		z-index : @zIndex-4;
		top     : 0;
		left    : 0;
		right   : 0;
		height  : 42px;
		.glass-nav();
	}
	&::after {
		content : "";
		position: fixed;
		z-index : @zIndex-5;
		top     : 42px;
		left    : 24px;
		right   : 0;
		.line-halfpx--hori();
	}
}

/*************************
 * Template: Cateogry
 *************************/

.cat main {
	grid-template-rows   : minmax((@leading * 5.5), auto) auto;
	row-gap              : 0;
	padding-bottom       : (@leading * 6);
	
	@media (max-width: @bp-mobile) {
		padding-bottom: 0;
		.pseduo-navbar();
	}
}

.cat-copyright {
	grid-column-start: 1;
	grid-column-end  : 4;
	grid-row-start   : 1;
	grid-row-end     : 2;
}
@media (max-width: @bp-mobile) {
	// Sticky-bottom footer
	.cat main {
		display: flex;
		flex-direction: column;
		min-height: 100vh;
	}
	.cat-copyright {
		margin-top: auto;
	}
}

.cat-brand {
	grid-column-start: 4;
	grid-column-end  : 10;
	grid-row-start   : 1;
	grid-row-end     : 2;
	
	// Refine for very-narrow screens
	@media (max-width: 360px) {
		.brand-sub {
			display: none;
		}
	}
}
.cat-toc {
	grid-column-start: 4;
	grid-column-end  : 10;
	grid-row-start   : 2;
	grid-row-end     : 3;
}
.cat-category {
	grid-column-start: 11;
	grid-column-end  : 13;
	grid-row-start   : 1;
	grid-row-end     : 3;
	
	@media (max-width: @bp-mobile) {
		// Display active category name
		.cat-category-heading {
			display: none;
		}
		.aside-caption::before {
			content       : attr(data-active);
			letter-spacing: 0;
			text-transform: none;
		}
	}
}

Markdown

# Donec et eros eu est rhoncus hendrerit
## Nunc eget dui rutrum, posuere risus at, hendrerit odio
### Mauris id nisl sed tortor rutrum efficitur

Lorem ipsum dolor sit amet, consectetur adipiscing elit.[^1] Proin mi nisl, egestas in justo at, porta finibus elit. Sed sit amet mi nibh. Quisque eleifend erat a nibh sodales, sit amet porta mauris scelerisque. Vivamus non dignissim nisl. Nunc in fringilla diam. Cras quam mi, consequat et risus eget, rhoncus sagittis leo[^2]. Maecenas fermentum sollicitudin ultricies. Nulla non nisl ac est pharetra elementum. Donec a massa libero. Aenean imperdiet in erat vitae feugiat. Cras turpis nulla, ullamcorper ornare efficitur dapibus, venenatis eget massa. Quisque dictum finibus ligula rutrum malesuada.

> Sed aliquet ultricies nulla, *nec faucibus massa* ultricies sodales. Maecenas lobortis felis congue congue semper. Aliquam rutrum lectus ac sapien consectetur pharetra.
>
> Phasellus maximus quam ac blandit hendrerit. Cras condimentum accumsan nulla, sed tempus lorem blandit nec. Mauris mauris[^3] mauris, sagittis vel iaculis vel, cursus ac nulla. Duis quis consectetur nunc. Donec id sollicitudin lorem. Aliquam **aliquet purus urna**, vel dictum purus porta nec.

Aliquam erat volutpat. Curabitur lacinia justo eget luctus vestibulum. Phasellus consectetur tincidunt tellus a dignissim. In eget orci nulla. Praesent non feugiat mauris. Integer posuere, dolor nec maximus placerat, nisi elit tincidunt mauris, viverra interdum massa tellus at quam. Nulla et lectus ac odio ultrices finibus blandit eu turpis. Pellentesque leo nulla, vestibulum sit amet porttitor in, ultrices quis velit. Maecenas non ipsum quis urna lacinia mattis. In dictum metus nibh, ac venenatis justo mattis et. Suspendisse ut erat arcu. Integer at mi fermentum, ornare velit eget, pharetra purus.

# Nullam eu nisl posuere, tempor tortor quis, auctor dui

Aliquam scelerisque vehicula dui, ornare pellentesque sapien condimentum a. Duis pulvinar condimentum urna quis egestas. Integer auctor hendrerit tincidunt. Vestibulum elit dui, congue vel scelerisque in, cursus nec mi. Maecenas felis urna, volutpat ac justo sed, aliquam tempor felis. Sed sollicitudin felis et eros aliquet venenatis. Proin vitae neque laoreet, blandit quam ut, vestibulum tortor. Suspendisse volutpat dolor quis purus imperdiet vulputate. Maecenas vitae tincidunt nibh, eu mollis sapien. Pellentesque a neque sit amet ex mattis ultrices at ac nulla. Nullam vitae nunc id augue tincidunt viverra ac in mi. Cras turpis leo, maximus non rhoncus quis, finibus id massa. Sed metus urna, euismod et justo eget, facilisis sollicitudin tortor. Donec fermentum molestie ante ut varius. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin laoreet risus tempor orci blandit, ac sodales augue tristique.

## Vivamus tincidunt nulla quis vestibulum auctor

Aenean molestie auctor elementum. Donec a lorem nunc. Phasellus tempor dui a massa ornare lobortis. Aliquam malesuada tellus eu diam euismod pellentesque. Nullam enim orci, facilisis id porta iaculis, consectetur sed lectus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Aliquam nec ex est. Vestibulum quis nibh nisl. Curabitur egestas lorem ut fermentum aliquet. Morbi velit dui, vestibulum sit amet interdum nec, gravida vehicula arcu. Quisque faucibus est vitae fermentum volutpat. Fusce blandit sapien sed velit rutrum, at dictum velit blandit. Integer purus nulla, dapibus nec eros quis, dictum finibus libero. Mauris vitae elit nisi. Etiam nec tellus sit amet lectus vestibulum placerat quis non eros.

### In mollis eros at lorem auctor, vel aliquet quam semper.

Morbi aliquet ultricies odio, ac tristique magna varius nec. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed neque neque, porta nec fringilla consectetur, feugiat non est. Etiam id neque a ipsum euismod sodales eget in enim. Cras massa nibh, faucibus nec semper a, euismod in nunc. Praesent pulvinar erat leo, ut vestibulum nisl pharetra quis. In in lorem fringilla, elementum sem nec, consectetur elit. Integer condimentum cursus elementum. Mauris dolor nulla, facilisis quis ligula ac, tempor tempus sapien.

#### Phasellus tincidunt eros sed felis varius, sit amet euismod quam gravida

Fusce dapibus venenatis rhoncus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla non blandit risus, quis semper dui. Pellentesque malesuada ligula ipsum, ac efficitur dolor pharetra ac. Vestibulum lorem eros, euismod vel dictum ut, tempor vulputate justo. Nam finibus posuere velit at tincidunt. Morbi egestas in massa eu scelerisque. Aenean lacus nibh, porttitor quis tempor ac, venenatis at dui. Vivamus lacinia tortor magna, ut posuere arcu aliquam vitae.

##### Curabitur rutrum dui sed nisl consectetur euismod

Sed a tellus venenatis, mattis ex quis, tincidunt leo. Duis vitae sapien vitae arcu volutpat placerat elementum sed lacus. Vivamus vel gravida massa. Vestibulum feugiat nisi sit amet neque placerat, in lobortis odio mollis. Aenean et felis mauris. Mauris ut ipsum at nunc fermentum semper ornare eget turpis. Aliquam a laoreet augue, nec aliquet sapien. Maecenas vehicula, ipsum sed luctus faucibus, leo ipsum bibendum purus, eget aliquam eros ipsum maximus nisl. Duis lacinia, magna maximus ultrices egestas, diam lectus aliquam purus, molestie scelerisque nunc sem sit amet enim. Proin finibus blandit consequat. Morbi feugiat ex eget ligula consectetur, ullamcorper convallis ipsum aliquet. In augue enim, hendrerit ultricies porta nec, tempor sed dolor. Etiam eget dictum lacus.

###### Suspendisse bibendum turpis sit amet volutpat congue

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam erat volutpat. Mauris ullamcorper ante eget porttitor porta. Fusce accumsan eros quis nisi egestas, non fringilla nisi pellentesque. Nunc gravida dolor eu orci commodo dapibus. Nunc egestas arcu quis sapien pharetra, at commodo ipsum auctor. Sed eget mollis turpis. Duis vulputate, tortor id cursus consequat, velit lorem cursus erat, eget bibendum neque eros nec justo. Praesent euismod lorem hendrerit lacus semper tempor. Quisque ut feugiat ante, nec eleifend libero. Ut egestas efficitur elementum. Praesent malesuada est risus, vitae facilisis quam accumsan a. Quisque ex orci, consectetur sed neque nec, tempor auctor enim.

![cHackathon (<i>illust by L&Q</i>)](https://doraresearch-design.laerhsif.com/data/post-fig-1.png "Fig. 1: cHackathon")

Duis posuere metus tempor venenatis convallis. Donec condimentum commodo massa id euismod. Suspendisse tempus maximus turpis, et facilisis sapien consectetur eu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis vel ultrices turpis. Mauris ac nisi eget nibh lobortis finibus vitae ut leo. Cras sed viverra sapien, at tempor risus. Nullam rhoncus ante quis dui sollicitudin interdum. Sed lobortis, lectus at pharetra tincidunt, est turpis lobortis libero, nec maximus tortor eros ut erat. Etiam quis pulvinar erat. Curabitur eleifend augue nec leo molestie ultrices ac sit amet turpis. Integer bibendum massa ac est malesuada, quis sagittis metus convallis. Mauris sollicitudin elit eu felis luctus tristique.

[^1]: Donec luctus lectus in nunc placerat viverra.
[^2]: Duis semper augue ac bibendum pretium.
[^3]: Quisque in nisi tincidunt, sollicitudin leo nec, sollicitudin justo.

Mardown fixture

Derived from: https://github.com/sindresorhus/generate-github-markdown-css/edit/main/fixture.md

Headers
Emphasis
Lists
Links
Images
Code and Syntax Highlighting
Tables
Blockquotes
Inline HTML
Horizontal Rule
Line Breaks
Youtube videos
Task lists

Headers

# H1
## H2
### H3
#### H4
##### H5
###### H6

Alternatively, for H1 and H2, an underline-ish style:

Alt-H1
======

Alt-H2
------

H1

H2

H3

H4

H5

H6

Alternatively, for H1 and H2, an underline-ish style:

Alt-H1

Alt-H2

Emphasis

Emphasis, aka italics, with *asterisks* or _underscores_.

Strong emphasis, aka bold, with **asterisks** or __underscores__.

Combined emphasis with **asterisks and _underscores_**.

Strikethrough uses two tildes. ~~Scratch this.~~

Emphasis, aka italics, with asterisks or underscores.

Strong emphasis, aka bold, with asterisks or underscores.

Combined emphasis with asterisks and underscores.

Strikethrough uses two tildes. ~~Scratch this.~~

Lists

(In this example, leading and trailing spaces are shown with with dots: ⋅)

1. First ordered list item
2. Another item
⋅⋅* Unordered sub-list.
1. Actual numbers don't matter, just that it's a number
⋅⋅1. Ordered sub-list
4. And another item.

⋅⋅⋅You can have properly indented paragraphs within list items. Notice the blank line above, and the leading spaces (at least one, but we'll use three here to also align the raw Markdown).

⋅⋅⋅To have a line break without a paragraph, you will need to use two trailing spaces.⋅⋅
⋅⋅⋅Note that this line is separate, but within the same paragraph.⋅⋅
⋅⋅⋅(This is contrary to the typical GFM line break behaviour, where trailing spaces are not required.)

* Unordered list can use asterisks
- Or minuses
+ Or pluses

First ordered list item
Another item
- Unordered sub-list.
Actual numbers don't matter, just that it's a number
1. Ordered sub-list
And another item.

You can have properly indented paragraphs within list items. Notice the blank line above, and the leading spaces (at least one, but we'll use three here to also align the raw Markdown).

To have a line break without a paragraph, you will need to use two trailing spaces.
Note that this line is separate, but within the same paragraph.
(This is contrary to the typical GFM line break behaviour, where trailing spaces are not required.)

Unordered list can use asterisks

Or minuses

Or pluses

foo
1. bar
  1. baz
    1. faz
foo2

foo
- bar
  - baz
    - faz
foo2

foo
- bar
  1. baz
    - faz

foo
1. bar
  - baz
    1. faz

Lists in a list item:
- Indented four spaces.
  - indented eight spaces.
- Four spaces again.
Multiple paragraphs in a list items:
It's best to indent the paragraphs four spaces
You can get away with three, but it can get
confusing when you nest other things.
Stick to four.

We indented the first line an extra space to align
it with these paragraphs. In real use, we might do
that to the entire list so that all items line up.

This paragraph is still part of the list item, but it looks messy to humans. So it's a good idea to wrap your nested paragraphs manually, as we did with the first two.
Blockquotes in a list item:

Skip a line and
indent the >'s four spaces.

Preformatted text in a list item:

 Skip a line and indent eight spaces.
 That's four spaces for the list
 and four to trigger the code block.

Links

There are two ways to create links.

[I'm an inline-style link](https://www.google.com)

[I'm an inline-style link with title](https://www.google.com "Google's Homepage")

[I'm a reference-style link][Arbitrary case-insensitive reference text]

[I'm a relative reference to a repository file](../blob/master/LICENSE)

[You can use numbers for reference-style link definitions][1]

Or leave it empty and use the [link text itself]

Some text to show that the reference links can follow later.

[arbitrary case-insensitive reference text]: https://www.mozilla.org
[1]: http://slashdot.org
[link text itself]: http://www.reddit.com

I'm an inline-style link

I'm an inline-style link with title

I'm a reference-style link

I'm a relative reference to a repository file

You can use numbers for reference-style link definitions

Or leave it empty and use the link text itself

Some text to show that the reference links can follow later.

Images

Here's our logo (hover to see the title text):

Inline-style: ![alt text](https://github.com/adam-p/markdown-here/raw/master/src/common/images/icon48.png "Logo Title Text 1")

Reference-style: ![alt text][logo]

[logo]: https://github.com/adam-p/markdown-here/raw/master/src/common/images/icon48.png "Logo Title Text 2"

Implicit figures:

![cHackathon (<i>illust by L&Q</i>)](https://doraresearch-design.laerhsif.com/data/post-fig-1.png)

Here's our logo (hover to see the title text):

Inline-style:

Reference-style:

Implicit figures:

Code and Syntax Highlighting

Code blocks are part of the Markdown spec, but syntax highlighting isn't. However, many renderers -- like Github's and Markdown Here -- support syntax highlighting. Which languages are supported and how those language names should be written will vary from renderer to renderer. Markdown Here supports highlighting for dozens of languages (and not-really-languages, like diffs and HTTP headers); to see the complete list, and how to write the language names, see the highlight.js demo page.

Inline `code` has `back-ticks around` it.

Inline code has back-ticks around it.

Blocks of code are either fenced by lines with three back-ticks ```, or are indented with four spaces. I recommend only using the fenced code blocks -- they're easier and only they support syntax highlighting.

```javascript
var s = "JavaScript syntax highlighting";
alert(s);
```

```python
s = "Python syntax highlighting"
print s
```

```
No language indicated, so no syntax highlighting.
But let's throw in a &lt;b&gt;tag&lt;/b&gt;.
```

var s = "JavaScript syntax highlighting";
alert(s);

s = "Python syntax highlighting"
print s

No language indicated, so no syntax highlighting in Markdown Here (varies on Github).
But let's throw in a <b>tag</b>.

Tables

Tables aren't part of the core Markdown spec, but they are part of GFM and Markdown Here supports them. They are an easy way of adding tables to your email -- a task that would otherwise require copy-pasting from another application.

Colons can be used to align columns.

| Tables        | Are           | Cool  |
| ------------- |:-------------:| -----:|
| col 3 is      | right-aligned |  |
| col 2 is      | centered      |    |
| zebra stripes | are neat      |     |

The outer pipes (|) are optional, and you don't need to make the raw Markdown line up prettily. You can also use inline Markdown.

Markdown | Less | Pretty
--- | --- | ---
*Still* | `renders` | **nicely**
1 | 2 | 3

Colons can be used to align columns.

Tables	Are	Cool
col 3 is	right-aligned
col 2 is	centered
zebra stripes	are neat

The outer pipes (|) are optional, and you don't need to make the raw Markdown line up prettily. You can also use inline Markdown.

Markdown	Less	Pretty
Still	`renders`	nicely
1	2	3

Blockquotes

> Blockquotes are very handy in email to emulate reply text.
> This line is part of the same quote.

Quote break.

> This is a very long line that will still be quoted properly when it wraps. Oh boy let's keep writing to make sure this is long enough to actually wrap for everyone. Oh, you can *put* **Markdown** into a blockquote.

Blockquotes are very handy in email to emulate reply text.
This line is part of the same quote.

Quote break.

This is a very long line that will still be quoted properly when it wraps. Oh boy let's keep writing to make sure this is long enough to actually wrap for everyone. Oh, you can put Markdown into a blockquote.

Inline HTML

You can also use raw HTML in your Markdown, and it'll mostly work pretty well.

<dl>
	<dt>Definition list</dt>
	<dd>Is something people use sometimes.</dd>

	<dt>Markdown in HTML</dt>
	<dd>Does *not* work **very** well. Use HTML <em>tags</em>.</dd>
</dl>

Definition list: Is something people use sometimes.

To reboot your computer, press <kbd>ctrl</kbd>+<kbd>alt</kbd>+<kbd>del</kbd>.

To reboot your computer, press ctrl+alt+del.

Horizontal Rule

Three or more...

---

Hyphens

***

Asterisks

___

Underscores

Three or more...

Hyphens

Asterisks

Underscores

Line Breaks

My basic recommendation for learning how line breaks work is to experiment and discover -- hit <Enter> once (i.e., insert one newline), then hit it twice (i.e., insert two newlines), see what happens. You'll soon learn to get what you want. "Markdown Toggle" is your friend.

Here are some things to try out:

Here's a line for us to start with.

This line is separated from the one above by two newlines, so it will be a *separate paragraph*.

This line is also a separate paragraph, but...
This line is only separated by a single newline, so it's a separate line in the *same paragraph*.

Here's a line for us to start with.

This line is separated from the one above by two newlines, so it will be a separate paragraph.

This line is also begins a separate paragraph, but...
This line is only separated by a single newline, so it's a separate line in the same paragraph.

(Technical note: Markdown Here uses GFM line breaks, so there's no need to use MD's two-space line breaks.)

Youtube videos

They can't be added directly but you can add an image with a link to the video like this:

<a href="http://www.youtube.com/watch?feature=player_embedded&v=YOUTUBE_VIDEO_ID_HERE
" target="_blank"><img src="http://img.youtube.com/vi/YOUTUBE_VIDEO_ID_HERE/0.jpg"
alt="IMAGE ALT TEXT HERE" width="240" height="180" border="10" ></a></a>

Or, in pure Markdown, but losing the image sizing and border:

[![IMAGE ALT TEXT HERE](http://img.youtube.com/vi/YOUTUBE_VIDEO_ID_HERE/0.jpg)](http://www.youtube.com/watch?v=YOUTUBE_VIDEO_ID_HERE)

Referencing a bug by #bugID in your git commit links it to the slip. For example #1.

Task List

foo
- foo
- foo
foo

A heading

Just a note, I've found that I can't test my markdown parser vs others.
For example, both markdown.js and showdown code blocks in lists wrong. They're
also completely inconsistent with regards to paragraphs in list items.

A link. Not anymore.

This will make me fail the test because markdown.js doesnt acknowledge arbitrary html blocks =/

List Item 1
List Item 2
- New List Item 1
  Hi, this is a list item.
- New List Item 2
  Another item
  Code goes here.
  Lots of it...
- New List Item 3
  The last item
List Item 3
The final item.
List Item 4
The real final item.

Paragraph.

bq Item 1

bq Item 2

New bq Item 1

New bq Item 2
Text here

Another blockquote!
I really need to get
more creative with
mockup text..
markdown.js breaks here again

Another Heading

Hello world. Here is a link.
And an image .

Code goes here.
Lots of it...

A list within a blockquote:

asterisk 1

asterisk 2

asterisk 3

This is strong and em.

So is this word.

This is strong and em.

So is this word.

Unordered

Asterisks tight:

asterisk 1
asterisk 2
asterisk 3

Asterisks loose:

asterisk 1
asterisk 2
asterisk 3

Pluses tight:

Plus 1
Plus 2
Plus 3

Pluses loose:

Plus 1
Plus 2
Plus 3

Minuses tight:

Minus 1
Minus 2
Minus 3

Minuses loose:

Minus 1
Minus 2
Minus 3

Ordered

Tight:

First
Second
Third

and:

One
Two
Three

Loose using tabs:

First
Second
Third

and using spaces:

One
Two
Three

Multiple paragraphs:

Item 1, graf one.

Item 2. graf two. The quick brown fox jumped over the lazy dog's
back.
Item 2.
Item 3.

Nested

Tab
- Tab
  - Tab

Here's another:

First
Second:
- Fee
- Fie
- Foe
Third

Same thing but with paragraphs:

First
Second:
- Fee
- Fie
- Foe
Third

This was an error in Markdown 1.0.1:

this
- sub
that

foo

bar

foo

Overview

Philosophy

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.

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.

Inline HTML

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.

Automatic Escaping for Special Characters

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&amp;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:

&copy;

and Markdown will leave it alone. But if you write:

AT&T

Markdown will translate it to:

AT&amp;T

Similarly, because Markdown supports inline 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 &lt; 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.)

Block Elements

Paragraphs and Line Breaks

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 intended 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 ></a> tag.

When you do want to insert a <br ></a> 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 ></a>, but a simplistic
"every line break is a <br ></a>" rule wouldn't work for Markdown.
Markdown's email-style blockquoting and multi-paragraph list items
work best -- and look better -- when you format them with hard breaks.

Headers

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 ######

Blockquotes

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.

Lists

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 intended 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.

Code Blocks

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">
        &copy; 2004 Foo Corporation
    </div>

will turn into:

<pre><code>&lt;div class="footer"&gt;
    &amp;copy; 2004 Foo Corporation
&lt;/div&gt;
</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.

Horizontal Rules

You can produce a horizontal rule tag (<hr ></a>) 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:

* * *

***

*****

- - -

---------------------------------------

_ _ _

Span Elements

Links

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.

The link URL may, optionally, be surrounded by angle brackets:

[id]: <http://example.com></a>  "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 constist 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.

Emphasis

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*fucking*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\*

Code

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>&lt;blink&gt;</code> tags.</p>

You can write this:

`&#8212;` is the decimal-encoded equivalent of `&mdash;`.

to produce:

<p><code>&amp;#8212;</code> is the decimal-encoded
equivalent of <code>&amp;mdash;</code>.</p>

Images

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:

![Alt text](/path/to/img.jpg)

![Alt text](/path/to/img.jpg "Optional title")

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.

Miscellaneous

Automatic Links

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></a>

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:

<[email protected]>

into something like this:

<a href="&#x6D;&#x61;i&#x6C;&#x74;&#x6F;:&#x61;&#x64;&#x64;&#x72;&#x65;
&#115;&#115;&#64;&#101;&#120;&#x61;&#109;&#x70;&#x6C;e&#x2E;&#99;&#111;
&#109;">&#x61;&#x64;&#x64;&#x72;&#x65;&#115;&#115;&#64;&#101;&#120;&#x61;
&#109;&#x70;&#x6C;e&#x2E;&#99;&#111;&#109;</a>

which will render in a browser as a clickable link to "[email protected]".

(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.)

Backslash Escapes

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 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

Foo [bar][].

Foo [bar](/url/ "Title with "quotes" inside").

[bar]: /url/ "Title with "quotes" inside"

This is the simple case.

This one has a line
break.

This one has a line
break with a line-ending space.

this that and the other

Here's a simple block:

foo

This should be a code block, though:

<div>
	foo
</div>

As should this:

<div>foo</div>

Now, nested:

foo

This should just be an HTML comment:

Multiline:

Code block:

<!-- Comment -->

Just plain comment, with trailing spaces on the line:

Code:

<hr ></a>

Hr's:

My Example

Hello world

-oldCode()
+newCode()

Test

Test #10 test #11 #1111

https://github.com/realfish/hackerlink-design-playground/issues/new

test

$STARSHIPDOGE contract renounced ✅ Liquidity #15 block 100 years ✅ 3% tokens auto burn on each transaction !! Already 80% total supply burned ✅✅ Elon Musk love Starship !! Big burn coming (August 1st) It’s new Shiba Inu🚀 big burn coming $BTC $ETH $XRP

...R

Test linkify & auto-reference

https://github.com/realfish/hackerlink-design-playground/issues/6
https://github.com/realfish/hackerlink-design-playground/pull/8
GH-6
GH-8

#6
#8
GH-6
GH-8

https://github.com/realfish/hackerlink-design-playground/commit/06778f274fe6d723353a676e2f901d93912de309
06778f274fe6d723353a676e2f901d93912de309
06778f2
dorahacksglobal/hackerlink-design-playground@db49109

06778f2
06778f2
06778f2
dorahacksglobal/hackerlink-design-playground@db49109

https://github.com/realfish/hackerlink-design-playground/blob/db49109f00238e9f21629402f0295e8e25cd6088/src/javascript/view/index.js#L21

hackerlink-design-playground/src/javascript/view/index.js

Line 21 in db49109

.then(data => new win.DOMParser().parseFromString(data, "text/xml"))

Test to inject JavaScript & CSS

"><img src=x id=test onerror=eval(atob(this.id))>

data:text/html, <H1>HTML INJECTION</h1>

<script>
alert("Test for alert");
</script>

<style>
.footer-con { display: none !important; }
</style>

<form action="http://example.com/">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe"><br><br>
  <input type="submit" value="Submit">
</form>

<p style="display: none">Test inline styles</p>

<div style="display: none">Unclosed HTML tag

data:text/html,

HTML INJECTION

Test inline styles

Unclosed HTML tag

Testbench of inline code

Testbench of inline code inline code testbench of inline code.

A sample Markdown article

Hackathon报名指南

Step 1：找到感兴趣的 Hackathon

在 Grant 页面 https://hackerlink.io/hackathon，你可以看到所有正在进行中的（以及已结束/尚未开始的）Hackathon活动。点击「Hackathon 详情」，可以看到关于活动的更多细节以及已报名的项目。

Step 2：Hackathon 报名

如果你已经有了符合 Hackathon 报名要求的项目，便可以在详情页中点击「申请 Hackathon」进行报名。
如果你此前已经在 HackerLink 平台建立了自己的 BUIDL（项目），那么请选择已有的 BUIDL 进行参与。如果你是 HackerLink 新手，请选择「新建 BUIDL」。

Mardown fixture: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent non tincidunt lacus. Vestibulum ac risus est. Ut luctus metus vitae ante sollicitudin, fermentum sagittis diam ullamcorper. Phasellus at dui erat. Cras imperdiet elit in tellus fermentum tincidunt. Fusce vel tellus ut libero posuere consectetur vitae nec massa. Cras porta gravida quam, at tincidunt libero congue in. Morbi libero est, venenatis nec dui ac, maximus sodales magna. Integer vestibulum ullamcorper purus, eget lobortis orci sollicitudin sit amet. Pellentesque at mi bibendum, scelerisque erat non, sollicitudin turpis.

Derived from: https://github.com/sindresorhus/generate-github-markdown-css/edit/main/fixture.md

Headers
Emphasis
Lists
Links
Images
Code and Syntax Highlighting
Tables
Blockquotes
Inline HTML
Horizontal Rule
Line Breaks
Youtube videos
Task lists

Headers

# H1
## H2
### H3
#### H4
##### H5
###### H6

Alternatively, for H1 and H2, an underline-ish style:

Alt-H1
======

Alt-H2
------

H1

H2

H3

H4

H5

H6

Alternatively, for H1 and H2, an underline-ish style:

Alt-H1

Alt-H2

Emphasis

Emphasis, aka italics, with *asterisks* or _underscores_.

Strong emphasis, aka bold, with **asterisks** or __underscores__.

Combined emphasis with **asterisks and _underscores_**.

Strikethrough uses two tildes. ~~Scratch this.~~

Emphasis, aka italics, with asterisks or underscores.

Strong emphasis, aka bold, with asterisks or underscores.

Combined emphasis with asterisks and underscores.

Strikethrough uses two tildes. ~~Scratch this.~~

Lists

(In this example, leading and trailing spaces are shown with with dots: ⋅)

1. First ordered list item
2. Another item
⋅⋅* Unordered sub-list.
1. Actual numbers don't matter, just that it's a number
⋅⋅1. Ordered sub-list
4. And another item.

⋅⋅⋅You can have properly indented paragraphs within list items. Notice the blank line above, and the leading spaces (at least one, but we'll use three here to also align the raw Markdown).

⋅⋅⋅To have a line break without a paragraph, you will need to use two trailing spaces.⋅⋅
⋅⋅⋅Note that this line is separate, but within the same paragraph.⋅⋅
⋅⋅⋅(This is contrary to the typical GFM line break behaviour, where trailing spaces are not required.)

* Unordered list can use asterisks
- Or minuses
+ Or pluses

First ordered list item
Another item
- Unordered sub-list.
Actual numbers don't matter, just that it's a number
1. Ordered sub-list
And another item.

You can have properly indented paragraphs within list items. Notice the blank line above, and the leading spaces (at least one, but we'll use three here to also align the raw Markdown).

To have a line break without a paragraph, you will need to use two trailing spaces.
Note that this line is separate, but within the same paragraph.
(This is contrary to the typical GFM line break behaviour, where trailing spaces are not required.)

Unordered list can use asterisks

Or minuses

Or pluses

foo
1. bar
  1. baz
    1. faz
foo2

foo
- bar
  - baz
    - faz
foo2

foo
- bar
  1. baz
    - faz

foo
1. bar
  - baz
    1. faz

Lists in a list item:
- Indented four spaces.
  - indented eight spaces.
- Four spaces again.
Multiple paragraphs in a list items:
It's best to indent the paragraphs four spaces
You can get away with three, but it can get
confusing when you nest other things.
Stick to four.

We indented the first line an extra space to align
it with these paragraphs. In real use, we might do
that to the entire list so that all items line up.

This paragraph is still part of the list item, but it looks messy to humans. So it's a good idea to wrap your nested paragraphs manually, as we did with the first two.
Blockquotes in a list item:

Skip a line and
indent the >'s four spaces.

Preformatted text in a list item:

 Skip a line and indent eight spaces.
 That's four spaces for the list
 and four to trigger the code block.

Links

There are two ways to create links.

[I'm an inline-style link](https://www.google.com)

[I'm an inline-style link with title](https://www.google.com "Google's Homepage")

[I'm a reference-style link][Arbitrary case-insensitive reference text]

[I'm a relative reference to a repository file](../blob/master/LICENSE)

[You can use numbers for reference-style link definitions][1]

Or leave it empty and use the [link text itself]

Some text to show that the reference links can follow later.

[arbitrary case-insensitive reference text]: https://www.mozilla.org
[1]: http://slashdot.org
[link text itself]: http://www.reddit.com

I'm an inline-style link

I'm an inline-style link with title

I'm a reference-style link

I'm a relative reference to a repository file

You can use numbers for reference-style link definitions

Or leave it empty and use the link text itself

Some text to show that the reference links can follow later.

Images

Here's our logo (hover to see the title text):

Inline-style: ![alt text](https://github.com/adam-p/markdown-here/raw/master/src/common/images/icon48.png "Logo Title Text 1")

Reference-style: ![alt text][logo]

[logo]: https://github.com/adam-p/markdown-here/raw/master/src/common/images/icon48.png "Logo Title Text 2"

Implicit figures:

![cHackathon (<i>illust by L&Q</i>)](https://doraresearch-design.laerhsif.com/data/post-fig-1.png)

Here's our logo (hover to see the title text):

Inline-style:

Reference-style:

Implicit figures:

Code and Syntax Highlighting

Inline `code` has `back-ticks around` it.

Inline code has back-ticks around it.

```javascript
var s = "JavaScript syntax highlighting";
alert(s);
```

```python
s = "Python syntax highlighting"
print s
```

```
No language indicated, so no syntax highlighting.
But let's throw in a &lt;b&gt;tag&lt;/b&gt;.
```

var s = "JavaScript syntax highlighting";
alert(s);

s = "Python syntax highlighting"
print s

No language indicated, so no syntax highlighting in Markdown Here (varies on Github).
But let's throw in a <b>tag</b>.

Tables

Colons can be used to align columns.

| Tables        | Are           | Cool  |
| ------------- |:-------------:| -----:|
| col 3 is      | right-aligned |  |
| col 2 is      | centered      |    |
| zebra stripes | are neat      |     |

The outer pipes (|) are optional, and you don't need to make the raw Markdown line up prettily. You can also use inline Markdown.

Markdown | Less | Pretty
--- | --- | ---
*Still* | `renders` | **nicely**
1 | 2 | 3

Colons can be used to align columns.

Tables	Are	Cool
col 3 is	right-aligned
col 2 is	centered
zebra stripes	are neat

The outer pipes (|) are optional, and you don't need to make the raw Markdown line up prettily. You can also use inline Markdown.

Markdown	Less	Pretty
Still	`renders`	nicely
1	2	3

Blockquotes

> Blockquotes are very handy in email to emulate reply text.
> This line is part of the same quote.

Quote break.

> This is a very long line that will still be quoted properly when it wraps. Oh boy let's keep writing to make sure this is long enough to actually wrap for everyone. Oh, you can *put* **Markdown** into a blockquote.

Blockquotes are very handy in email to emulate reply text.
This line is part of the same quote.

Quote break.

This is a very long line that will still be quoted properly when it wraps. Oh boy let's keep writing to make sure this is long enough to actually wrap for everyone. Oh, you can put Markdown into a blockquote.

Inline HTML

You can also use raw HTML in your Markdown, and it'll mostly work pretty well.

<dl>
	<dt>Definition list</dt>
	<dd>Is something people use sometimes.</dd>

	<dt>Markdown in HTML</dt>
	<dd>Does *not* work **very** well. Use HTML <em>tags</em>.</dd>
</dl>

Definition list: Is something people use sometimes.

To reboot your computer, press <kbd>ctrl</kbd>+<kbd>alt</kbd>+<kbd>del</kbd>.

To reboot your computer, press ctrl+alt+del.

Horizontal Rule

Three or more...

---

Hyphens

***

Asterisks

___

Underscores

Three or more...

Hyphens

Asterisks

Underscores

Line Breaks

Here are some things to try out:

Here's a line for us to start with.

This line is separated from the one above by two newlines, so it will be a *separate paragraph*.

This line is also a separate paragraph, but...
This line is only separated by a single newline, so it's a separate line in the *same paragraph*.

Here's a line for us to start with.

This line is separated from the one above by two newlines, so it will be a separate paragraph.

This line is also begins a separate paragraph, but...
This line is only separated by a single newline, so it's a separate line in the same paragraph.

(Technical note: Markdown Here uses GFM line breaks, so there's no need to use MD's two-space line breaks.)

Youtube videos

They can't be added directly but you can add an image with a link to the video like this:

<a href="http://www.youtube.com/watch?feature=player_embedded&v=YOUTUBE_VIDEO_ID_HERE
" target="_blank"><img src="http://img.youtube.com/vi/YOUTUBE_VIDEO_ID_HERE/0.jpg"
alt="IMAGE ALT TEXT HERE" width="240" height="180" border="10" ></a></a>

Or, in pure Markdown, but losing the image sizing and border:

[![IMAGE ALT TEXT HERE](http://img.youtube.com/vi/YOUTUBE_VIDEO_ID_HERE/0.jpg)](http://www.youtube.com/watch?v=YOUTUBE_VIDEO_ID_HERE)

Referencing a bug by #bugID in your git commit links it to the slip. For example #1.

Task List

foo
- foo
- foo
foo

A heading

A link. Not anymore.

This will make me fail the test because markdown.js doesnt acknowledge arbitrary html blocks =/

List Item 1
List Item 2
- New List Item 1
  Hi, this is a list item.
- New List Item 2
  Another item
  Code goes here.
  Lots of it...
- New List Item 3
  The last item
List Item 3
The final item.
List Item 4
The real final item.

Paragraph.

bq Item 1

bq Item 2

New bq Item 1

New bq Item 2
Text here

Another blockquote!
I really need to get
more creative with
mockup text..
markdown.js breaks here again

Another Heading

Hello world. Here is a link.
And an image .

Code goes here.
Lots of it...

A list within a blockquote:

asterisk 1

asterisk 2

asterisk 3

This is strong and em.

So is this word.

This is strong and em.

So is this word.

Unordered

Asterisks tight:

asterisk 1
asterisk 2
asterisk 3

Asterisks loose:

asterisk 1
asterisk 2
asterisk 3

Pluses tight:

Plus 1
Plus 2
Plus 3

Pluses loose:

Plus 1
Plus 2
Plus 3

Minuses tight:

Minus 1
Minus 2
Minus 3

Minuses loose:

Minus 1
Minus 2
Minus 3

Ordered

Tight:

First
Second
Third

and:

One
Two
Three

Loose using tabs:

First
Second
Third

and using spaces:

One
Two
Three

Multiple paragraphs:

Item 1, graf one.

Item 2. graf two. The quick brown fox jumped over the lazy dog's
back.
Item 2.
Item 3.

Nested

Tab
- Tab
  - Tab

Here's another:

First
Second:
- Fee
- Fie
- Foe
Third

Same thing but with paragraphs:

First
Second:
- Fee
- Fie
- Foe
Third

This was an error in Markdown 1.0.1:

this
- sub
that

foo

bar

foo

Overview

Philosophy

Markdown is intended to be as easy-to-read and easy-to-write as is feasible.

Inline HTML

Markdown's syntax is intended for one purpose: to be used as a
format for writing for the web.

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.

Unlike block-level HTML tags, Markdown syntax is processed within
span-level tags.

Automatic Escaping for Special Characters

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&amp;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.

So, if you want to include a copyright symbol in your article, you can write:

&copy;

and Markdown will leave it alone. But if you write:

AT&T

Markdown will translate it to:

AT&amp;T

Similarly, because Markdown supports inline 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 &lt; 5

Block Elements

Paragraphs and Line Breaks

When you do want to insert a <br ></a> break tag using Markdown, you
end a line with two or more spaces, then type return.

Headers

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

# This is an H1 #

## This is an H2 ##

### This is an H3 ######

Blockquotes

> 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.

Lists

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

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 intended 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.

Code Blocks

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).

    <div class="footer">
        &copy; 2004 Foo Corporation
    </div>

will turn into:

<pre><code>&lt;div class="footer"&gt;
    &amp;copy; 2004 Foo Corporation
&lt;/div&gt;
</code></pre>

Horizontal Rules

* * *

***

*****

- - -

---------------------------------------

_ _ _

Span Elements

Links

Markdown supports two style of links: inline and reference.

In both styles, the link text is delimited by [square brackets].

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.

The link URL may, optionally, be surrounded by angle brackets:

[id]: <http://example.com></a>  "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 constist 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.

[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/

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").

Emphasis

*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*fucking*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\*

Code

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>

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>&lt;blink&gt;</code> tags.</p>

You can write this:

`&#8212;` is the decimal-encoded equivalent of `&mdash;`.

to produce:

<p><code>&amp;#8212;</code> is the decimal-encoded
equivalent of <code>&amp;mdash;</code>.</p>

Images

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:

![Alt text](/path/to/img.jpg)

![Alt text](/path/to/img.jpg "Optional title")

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.

Miscellaneous

Automatic Links

<http://example.com></a>

Markdown will turn this into:

<a href="http://example.com/">http://example.com/</a>

<[email protected]>

into something like this:

<a href="&#x6D;&#x61;i&#x6C;&#x74;&#x6F;:&#x61;&#x64;&#x64;&#x72;&#x65;
&#115;&#115;&#64;&#101;&#120;&#x61;&#109;&#x70;&#x6C;e&#x2E;&#99;&#111;
&#109;">&#x61;&#x64;&#x64;&#x72;&#x65;&#115;&#115;&#64;&#101;&#120;&#x61;
&#109;&#x70;&#x6C;e&#x2E;&#99;&#111;&#109;</a>

which will render in a browser as a clickable link to "[email protected]".

Backslash Escapes

\*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

Foo [bar][].

Foo [bar](/url/ "Title with "quotes" inside").

[bar]: /url/ "Title with "quotes" inside"

This is the simple case.

This one has a line
break.

This one has a line
break with a line-ending space.

this that and the other

Here's a simple block:

foo

This should be a code block, though:

<div>
	foo
</div>

As should this:

<div>foo</div>

Now, nested:

foo

This should just be an HTML comment:

Multiline:

Code block:

<!-- Comment -->

Just plain comment, with trailing spaces on the line:

Code:

<hr ></a>

Hr's:

My Example

Hello world

-oldCode()
+newCode()

Testbench of tables

Tables	Are	Cool	Tables	Are	Cool	Tables	Are	Cool
col 3 is	right-aligned
col 2 is	centered
zebra stripes	are neat

Name (TC) 名稱（繁）名称（繁）	Name (SC) 名稱（簡）名称（简）	Character 字符字符	Unicode Unicode Unicode	Name Unicode名稱 Unicode名称	Note 注注
句號	句号	。	3002	IDEOGRAPHIC FULL STOP
句號	句号	．	FF0E	FULLWIDTH FULL STOP
逗號	逗号	，	FF0C	FULLWIDTH COMMA
頓號	顿号	、	3001	IDEOGRAPHIC COMMA
冒號	冒号	：	FF1A	FULLWIDTH COLON
分號	分号	；	FF1B	FULLWIDTH SEMICOLON
驚嘆號	叹号	！	FF01	FULLWIDTH EXCLAMATION MARK	Three exclamation marks used sequentially should take space of two characters. 三个叹号叠用时应占二个汉字大小。三個驚嘆號疊用時應佔二個漢字大小。
驚嘆號	叹号	‼	203C	DOUBLE EXCLAMATION MARK	Takes one character width. 占一个汉字大小。佔一個漢字大小。
問號	问号	？	FF1F	FULLWIDTH QUESTION MARK	Three exclamation marks used sequentially should take space of two characters. 三个问号叠用时应占二个汉字大小。三個問號疊用時應佔二個漢字大小。
問號	问号	⁇	2047	DOUBLE QUESTION MARK	Takes one character width. 占一个汉字大小。佔一個漢字大小。

realfish / hackerlink-design-playground Goto Github PK

hackerlink-design-playground's Introduction

An anti-disciplinary designer

hackerlink-design-playground's People

Contributors

Stargazers

Watchers

hackerlink-design-playground's Issues

From 1

From 5

JavaScript

Python

Ruby

C++

Solidity

HTML

Less

Markdown

Table of Contents

Headers

H1

H2

H3

H4

H5

H6

Alt-H1

Alt-H2

Emphasis

Lists

Links

Images

Code and Syntax Highlighting

Tables

Blockquotes

Inline HTML

Horizontal Rule

Line Breaks

Youtube videos

Task List

A heading

Another Heading

Unordered

Ordered

Nested

Overview

Philosophy

Inline HTML

Automatic Escaping for Special Characters

Block Elements

Paragraphs and Line Breaks

Headers

Blockquotes

Lists

Code Blocks

Horizontal Rules

Span Elements

Links

Emphasis

Code

Images

Miscellaneous

Automatic Links

Backslash Escapes

HTML INJECTION

Hackathon报名指南

Step 1：找到感兴趣的 Hackathon

Step 2：Hackathon 报名

Table of Contents

Headers

H1

H2

H3

H4

H5

H6

Alt-H1

Alt-H2

Emphasis

Lists

`An anti-disciplinary designer`