Modified from https://markdown-it.github.io

h1 Heading

h2 Heading

h3 Heading

h4 Heading

h5 Heading

h6 Heading

h1 Heading

h2 Heading

h3 Heading

h4 Heading

h5 Heading

h6 Heading

Horizontal Rules

Typographic replacements

Enable typographer option to see result.

test.. test… test….. test?….. test!….

!!!!!! ???? ,, – —

“Smartypants, double quotes” and ‘single quotes’

Ligatures

Difficult waffles

Emphasis

This is bold text

This is italic text

~~Strikethrough~~

Blockquotes

Blockquotes can also be nested… > …by using additional greater-than signs right next to each other… > > …or with spaces between arrows.

But there are none so frightened, or so strange in their fear, as conquerors. They conjure phantoms endlessly, terrified that their victims will someday do back what was done to them—even if, in truth, their victims couldn’t care less about such pettiness and have moved on. Conquerors live in dread of the day when they are shown to be, not superior, but simply lucky.

N.K. Jemison, The Stone Sky

Lists

Unordered

Create a list by starting a line with +, -, or *
Sub-lists are made by indenting 2 spaces:
- Marker character change forces new list start:
  - Ac tristique libero volutpat at
  - Facilisis in pretium nisl aliquet
  - Nulla volutpat aliquam velit
    - I really like indents
      - So let’s keep going
Very easy!

Ordered

Lorem ipsum dolor sit amet
Another step 3. Here we go again
- Mixing types
  1. Another step
Consectetur adipiscing elit
Integer molestie lorem at massa
You can use sequential numbers…
…or keep all the numbers as 1.

Start numbering with offset:

Code

Inline code

Indented code

// Some comments
line 1 of code
line 2 of code
line 3 of code

Block code “fences”

Sample text here...

Syntax highlighting

var foo = function (bar) {
  return bar++;
};

console.log(foo(5));

require "gem"

number = 0
regexp = /[abc]/

# This is a comment
class Person
  
  attr_accessor :name
  
  def initialize(attributes = {})
    @name = attributes[:name]
  end
  
  def self.greet
    "hello"
  end
end

person1 = Person.new(:name => "Chris")
puts "#{Person::greet} #{person1.name}\n"

Collapsible code

Camera Class

class Camera
  attr_accessor :window_x, :window_y, :window_scale, :world_x, :world_y, :width, :height, :world, :args

  def draw_debug_border
    args.outputs.borders << [window_x, window_y, width, height]
  end

  def initialize(window_x, window_y, window_scale, world_x, world_y, width, height, world, args)
    self.window_x = window_x
    self.window_y = window_y
    self.window_scale = window_scale
    self.world_x = world_x
    self.world_y = world_y
    self.width = width
    self.height = height
    self.world = world
    self.args = args
  end

  def render
    render_intersecting_tiles
    render_player
  end

  def world_width
    @world_width ||= width/window_scale.abs
  end

  def world_height
    @world_height ||= height/window_scale.abs
  end

  # The camera box needs to be inversely scaled, since it's either
  # zooming in, or zooming out of the map
  def camera_box
    [world_x, world_y, world_width, world_height]
  end

  # Get the relative position of the tile (relative to the camera
        # then add the x/y that the camera is offset from the window itself
  def convert_x_coordinate(given_world_x)
    ((given_world_x - self.world_x) * self.window_scale) + self.window_x
  end

  def convert_y_coordinate(given_world_y)
    ((given_world_y - self.world_y) * self.window_scale) + self.window_y
  end

  def render_player
    world.player.update_sprite(convert_x_coordinate(world.player.x),  convert_y_coordinate(world.player.y))
    world.player.sprite_for_render.scale!(window_scale)
    args.outputs.sprites << world.player.sprite_for_render
  end

  def render_intersecting_tiles
    world.cached_tiles.each do |tile|
      # Currently just render the whole map for debugging purposes
      if tile.dimensions(window_scale).intersect_rect?(camera_box)
        sprite_x = convert_x_coordinate(tile.map_x)
        sprite_y = convert_y_coordinate(tile.map_y)

        tile.sprite.x = sprite_x
        tile.sprite.y = sprite_y

        tile.sprite.scale!(window_scale)
        args.outputs.sprites << tile.sprite
      end
    end
  end
end

class CollisionLayer
  attr_accessor :collision_rectangles, :collision_subgrid

  COLLISION_SUBGRID_DIMENSIONS = 300

  def initialize
    self.collision_rectangles = []
    self.collision_subgrid = {}
  end

  def add_collision_shape(shape_details)
    normalized_x = shape_details[:x] + shape_details[:shape_x]
    normalized_y = shape_details[:y] + shape_details[:shape_y]

    rectangle = [normalized_x, normalized_y, shape_details[:shape_width], shape_details[:shape_height]]
    self.collision_rectangles << rectangle
    x_subgrid = subgrid_range(normalized_x)
    y_subgrid = subgrid_range(normalized_y)

    collision_subgrid[x_subgrid] ||= {}
    collision_subgrid[x_subgrid][y_subgrid] ||= []
    collision_subgrid[x_subgrid][y_subgrid] << rectangle
  end

  def subgrid_range(value)
    ((value.to_f/COLLISION_SUBGRID_DIMENSIONS.to_f).floor * COLLISION_SUBGRID_DIMENSIONS) - 1
  end

  def collision?(x, y)
    # x_subgrid = self.collision_subgrid.find{|k,v| k == subgrid_range(x) }
    # return false if x_subgrid.nil?

    # y_subgrid = x_subgrid[1].find{|k,v| k == subgrid_range(y) }
    # return false if y_subgrid.nil?

    collision_rectangles.any?{|rectangle| [x,y].inside_rect?(rectangle)}
  end

  def draw_debug_rects(args)
    self.collision_rectangles.each do |rectangle|
      args.outputs.solids << rectangle
    end
  end

  def self.shape_from_tile(tile_data)
    shape = tile_data["objectgroup"]["objects"].first

    return {
      shape_height: shape["height"],
      shape_width: shape["width"],
      shape_x: shape["x"],
      shape_y: shape["y"],
      shape_rotation: shape["rotation"]
    }
  end
end

Tables

Option	Description
data	path to data files to supply the data that will be passed into templates.
engine	engine to be used for processing templates. Handlebars is the default.
ext	extension to be used for dest files.

Right aligned columns

Option	Description
data	path to data files to supply the data that will be passed into templates.
engine	engine to be used for processing templates. Handlebars is the default.
ext	extension to be used for dest files.

Option	Description
ext	1234567890
style2	1131711
style3	0040900
style4	11:31,711
data	00:40.900
engine	0.45, 0.91, +0.08
final	0.00, 1.13, ~7.12

Links

link text

link with title

Autoconverted link https://github.com/nodeca/pica (enable linkify to see)

Images

Adacats Octoqueer

Like links, Images also have a footnote style syntax

Alt text

With a reference later in the document defining the URL location:

Asides

Salamanders are a group of amphibians with a lizard-like appearance, including short legs and a tail in both larval and adult forms.

Several species of salamander inhabit the temperate rainforest of the Pacific Northwest, including the Ensatina, the Northwestern Salamander and the Rough-skinned Newt. Most salamanders are nocturnal, and hunt for insects, worms and other small creatures.

Figures

A screenshot of 'Sunday Papers', my skeleton template for nanoc — A screenshot of "Sunday Papers"

Expandable Table of Contents

Plugins

The killer feature of markdown-it is very effective support of syntax plugins.

Emojies

Classic markup: :wink: :crush: :cry: :tear: :laughing: :yum:

Shortcuts (emoticons): :-) :-( 8-) ;)

see how to change output with twemoji.

Subscript / Superscript

19^th^
H~2~O

<ins>

++Inserted text++

<mark>

==Marked text==

Footnotes

Footnote 1 link¹.

Footnote 2 link².

Inline footnote^[Text of inline footnote] definition.

Duplicated footnote reference².

Definition lists

Term 1

Definition 1 with lazy continuation.

Term 2 with inline markup

Definition 2

{ some code, part of Definition 2 }

Third paragraph of definition 2.

Compact style:

Term 1 ~ Definition 1

Term 2 ~ Definition 2a ~ Definition 2b

Abbreviations

This is HTML abbreviation example.

It converts “HTML”, but keep intact partial entries like “xxxHTMLyyy” and so on.

Custom containers

::: warning here be dragons :::

Combined example

See longer example here

Tortor Per Tristique

Eleifend habitasse habitasse turpis consectetuer morbi at leo justo pede felis. Sociosqu conubia lacinia placerat fames primis habitasse leo cum. Vulputate proin nascetur. Fusce. Bibendum viverra blandit netus rhoncus sociis lorem varius ullamcorper bibendum enim fames hac feugiat lobortis. Turpis vitae scelerisque lacinia, vitae sem sapien consequat dictumst donec habitant malesuada dictumst vulputate pretium platea ornare nostra libero senectus augue aliquet euismod. Luctus. Iaculis euismod ligula. Pede augue viverra phasellus ante lobortis consectetuer curae; Arcu cubilia. Ligula consequat purus vulputate, blandit hac tristique donec tincidunt metus. Convallis fringilla pharetra lobortis. Ad in amet neque elementum metus. Commodo vel phasellus vulputate justo ultrices dolor lorem nisl suscipit. Nisl consequat metus euismod Gravida tortor id rhoncus tempus ac sit Ad.

Lorem ipsum dolor sit amet
Another step 3. Here we go again
- Mixing types
  1. Another step
Consectetur adipiscing elit
Integer molestie lorem at massa

Viverra. Potenti feugiat hendrerit gravida ut eros tempus pellentesque mollis pellentesque elit nibh ridiculus pellentesque elit lacus dapibus ultricies accumsan consectetuer nisi. Erat felis Duis commodo venenatis porta ultrices praesent. Dolor cum bibendum aptent a magna nunc suspendisse condimentum habitant vel aenean convallis non ridiculus interdum placerat hac porttitor urna per cubilia eget hendrerit, tincidunt et porttitor torquent curae; montes urna imperdiet elementum.

Odio in euismod Id. Purus ullamcorper convallis sociis arcu nisl laoreet inceptos phasellus dui commodo turpis mus. Ligula Nisi tortor, litora hymenaeos conubia non lectus ipsum nam libero parturient tristique. Non accumsan eros nulla non, inceptos ut interdum hymenaeos tempus eu luctus elementum, interdum lacinia sociosqu primis tempor, magna eleifend aptent mollis scelerisque cum dui. Duis porta eleifend nostra ad volutpat varius habitasse Condimentum class quam sit lobortis sagittis.

Secondary Heading

Sociosqu sodales, nibh, quis nisi pulvinar. Dignissim sodales commodo ipsum mus Enim nullam per fermentum ad diam hendrerit Litora urna, luctus per dignissim a. Morbi malesuada nisi odio, nisl orci augue primis eu ad nunc hymenaeos cras. Morbi. Hac netus purus erat lectus cubilia elit mi luctus enim dui. Rhoncus nibh leo urna blandit ligula malesuada sem nostra tincidunt inceptos leo congue leo metus mollis at. Lacus adipiscing porta ullamcorper sagittis fames nascetur natoque venenatis nunc suspendisse per erat cubilia sociis tincidunt dignissim dictum sociis. Urna nisi natoque laoreet tellus tristique pellentesque mollis. Dignissim tincidunt ipsum, mi vivamus enim nullam parturient. Sociosqu nisl sollicitudin ut rutrum. Sagittis amet urna vel scelerisque vel vel semper Non donec, sodales sociis potenti nostra ornare commodo egestas volutpat cras torquent curabitur nibh hac etiam ultricies nascetur. Sodales purus velit commodo vitae congue phasellus vestibulum sociis nisl risus. Sollicitudin natoque nascetur class vestibulum.

Velit cras quisque hac quam vivamus lorem nascetur aenean dapibus, hymenaeos quis posuere volutpat torquent semper conubia. Cubilia integer curae; tellus urna nisl ornare pede inceptos magna ante vivamus fermentum orci tellus magna ut dictum vestibulum. Ante luctus feugiat. Torquent semper vulputate nullam facilisi. Donec diam gravida vulputate cubilia nulla nisl tortor platea nascetur mattis venenatis Erat dapibus elit arcu. Sit Aliquet blandit id neque aliquet mauris augue porttitor lectus placerat nullam tortor cursus lacinia nec curae; magna tempor ipsum mattis aptent. Elementum taciti metus eu sit nisi morbi porta platea. Sed fusce rhoncus per enim duis aliquet placerat purus nisi ipsum turpis habitant risus nisl porta faucibus ornare consequat. Ligula cubilia ultrices. Porttitor lectus risus maecenas habitant venenatis proin cum accumsan aptent mus, quis tortor inceptos lacinia porttitor orci lacus felis semper dapibus enim ligula augue posuere lacus risus. Nullam ridiculus tempus accumsan congue hendrerit a curabitur magnis quis ad, fusce nullam enim. Leo suspendisse cum dignissim dui ornare ridiculus vulputate. Sapien imperdiet sit viverra.

Fermentum porttitor taciti etiam tempor tempus, congue ridiculus, eleifend enim diam penatibus. Imperdiet. Augue Potenti montes convallis magna tempor per libero suscipit. Nam potenti praesent hac, sapien senectus aptent suspendisse. Augue. Eleifend praesent pulvinar aliquam diam massa adipiscing. Nascetur sociosqu nam tincidunt viverra integer hymenaeos congue litora consequat. Mi elementum Aenean. Arcu fermentum libero quisque sodales posuere nisi feugiat nisl nullam ligula vehicula. Pellentesque. Sociis mollis eros donec suscipit et scelerisque commodo fermentum vehicula fusce purus vulputate ligula. Urna elementum. Hendrerit arcu sagittis nec sollicitudin consectetuer vitae Ornare arcu nostra aliquet, gravida vulputate. Ligula phasellus viverra per dapibus. Semper.

Footnote can have markup

and multiple paragraphs. ↩
Footnote text. ↩ ↩²