Rendering Tables from CSV

A kitchen sink page is to showcase the various markdown features supported by just-the-docs. View the source code of this page (the sink.md file in this repository) to see how to use these features.

Please also refer to https://just-the-docs.com/docs/ui-components/ for other UI components you can use in your markdown files.

Header 1
1. Header 2
Images
Embed videos (iframe)
Callouts
Links
1. Markdown links
2. HTML links

Text can be bold, italic, or ~~strikethrough~~.

Link to another page.

There should be whitespace between paragraphs.

There should be whitespace between paragraphs. We recommend including a README, or a file with information about your project.

Header 1

This is a normal paragraph following a header. GitHub is a code hosting platform for version control and collaboration. It lets you and others work together on projects from anywhere.

Header 2

This is a blockquote following a header.
When something is important enough, you do it even if the odds are not in your favor.

Header 3

// Javascript code with syntax highlighting.
var fun = function lang(l) {
  dateformat.i18n = require('./lang/' + l)
  return true;
}

# Ruby code with syntax highlighting
GitHubPages::Dependencies.gems.each do |gem, version|
  s.add_dependency(gem, "= #{version}")
end

Header 4 `with code not transformed`

This is an unordered list following a header.
This is an unordered list following a header.
This is an unordered list following a header.

Header 5

This is an ordered list following a header.
This is an ordered list following a header.
This is an ordered list following a header.

Header 6

This is a very long link which wraps and therefore doesn’t overflow even when it comes at the beginning of the line.

This is a very long link which wraps and therefore doesn’t overflow the line when used first in an item in a list.

head1	head two	three
ok	good swedish fish	nice
out of stock	good and plenty	nice
ok	good `oreos`	hmm
ok	good `zoute` drop	yumm

There’s a horizontal rule below this.

Here is an unordered list:

Item foo
Item bar
Item baz
Item zip

And an ordered list:

Item one
Item two
Item three
Item four

And an ordered list, continued:

Item one
Item two

Some text

Item three
Item four

And an ordered list starting from 42:

Item 42
Item 43
Item 44

And a nested list:

level 1 item
- level 2 item
- level 2 item
  - level 3 item
  - level 3 item
level 1 item
- level 2 item
- level 2 item
- level 2 item
level 1 item
- level 2 item
- level 2 item
level 1 item

Nesting an ol in ul in an ol

level 1 item (ul)
1. level 2 item (ol)
2. level 2 item (ol)
  - level 3 item (ul)
  - level 3 item (ul)
level 1 item (ul)
1. level 2 item (ol)
2. level 2 item (ol)
  - level 3 item (ul)
  - level 3 item (ul)
3. level 4 item (ol)
4. level 4 item (ol)
  - level 3 item (ul)
  - level 3 item (ul)
level 1 item (ul)

And a task list

Hello, this is a TODO item
Hello, this is another TODO item
Goodbye, this item is done

Nesting task lists

Nesting a ul in a task list

level 1 item (task)
- level 2 item (ul)
- level 2 item (ul)
level 1 item (task)
level 1 item (task)

Nesting a task list in a ul

level 1 item (ul)
- level 2 item (task)
- level 2 item (task)
level 1 item (ul)
level 1 item (ul)

Labels

I’m a label

blue

green

purple

yellow

red

bold

italic

bold + italic

Definition lists can be used with HTML syntax.

Name: Godzilla
Born: 1952
Birthplace: Japan
Color: Green

Multiple description terms and values

Term: Brief description of Term
Longer Term: Longer description of Term, possibly more than one line
Term: First description of Term, possibly more than one line; Second description of Term, possibly more than one line
Term1
Term2: Single description of Term1 and Term2, possibly more than one line
Term1
Term2: First description of Term1 and Term2, possibly more than one line; Second description of Term1 and Term2, possibly more than one line

More code

def dump_args(func):
    "This decorator dumps out the arguments passed to a function before calling it"
    argnames = func.func_code.co_varnames[:func.func_code.co_argcount]
    fname = func.func_name
    def echo_func(*args,**kwargs):
        print fname, ":", ', '.join(
            '%s=%r' % entry
            for entry in zip(argnames,args) + kwargs.items())
        return func(*args, **kwargs)
    return echo_func

@dump_args
def f1(a,b,c):
    print a + b + c

f1(1, 2, 3)

def precondition(precondition, use_conditions=DEFAULT_ON):
    return conditions(precondition, None, use_conditions)

def postcondition(postcondition, use_conditions=DEFAULT_ON):
    return conditions(None, postcondition, use_conditions)

class conditions(object):
    __slots__ = ('__precondition', '__postcondition')

    def __init__(self, pre, post, use_conditions=DEFAULT_ON):
        if not use_conditions:
            pre, post = None, None

        self.__precondition  = pre
        self.__postcondition = post

Long, single-line code blocks should not wrap. They should horizontally scroll if they are too long. This line should be long enough to demonstrate this.

Syntax highlighting

You can add syntax highlighting to code blocks by specifying the language after the opening triple backticks. For example, the following is a code block with Python syntax highlighting:

From personal experience, syntax highlighting may not work properly if you are using Chrome/Microsoft Edge with 1password extension. If you encounter this issue, try disabling the 1password extension for your site.

    ```python
    def hello_world():
        print("Hello, world!")
    ```

Change the python above to the desired programming language for different syntax highlighting. See the list of supported languages.

Mermaid Diagrams

The following code is displayed as a diagram only when a mermaid key supplied in _config.yml.

graph TD;
    accTitle: the diamond pattern
    accDescr: a graph with four nodes: A points to B and C, while B and C both point to D
    A-->B;
    A-->C;
    B-->D;
    C-->D;

Collapsed Section

The following uses the <details> tag to create a collapsed section.

Shopping list (click me!)

This is content inside a <details> dropdown.

Apples
Oranges
Milk

Images

This is how to include images that is part of the repository. The “relative_url” filter is required to ensure the correct path is used regardless of whether the site is served from the root or a subpath.

This is the code to include the image, if you put the image in the assets/images folder:

<img src="/jtd-edit-setup/assets/images/UTL.png" alt="UTL" style="width:200px;"/>

UTL

Embed videos (iframe)

You can embed videos using an <iframe>. Replace the LINK_TO_THE_VIDEO with the actual video URL.

You can also use the share button at MyMedia to get the embed code. The code looks like this:

<iframe width="560" height="315" src="LINK_TO_THE_VIDEO" frameborder="0" allowfullscreen> iframe not supported </iframe>

It is recommended to set the width to 100% and use style="aspect-ratio: 16/9; max-width: 740px;" to ensure the video scales properly on different screen sizes. Modify the code as follows:

<iframe
  width="100%"
  style="aspect-ratio: 16/9; max-width: 740px;"
  src="LINK_TO_THE_VIDEO"
  frameborder="0"
  allowfullscreen>
  iframe not supported
</iframe>

Here is an example of embedding a MyMedia video:

Callouts

New (v0.4.0)

Markdown does not include support for callouts. However, you can style text as a callout using a Markdown extension supported by kramdown: block IALs.

Common kinds of callouts include highlight, important, new, note, and warning.

These callout names are not pre-defined by the theme: you need to define your own names.

When you have configured the color and (optional) title for a callout, you can apply it to a paragraph, or to a block quote with several paragraphs, as illustrated below.¹

An untitled callout

{: .highlight }
A paragraph

A paragraph

A single paragraph callout

{: .note }
A paragraph

A paragraph

{: .note-title }
> My note title
>
> A paragraph with a custom title callout

My note title
A paragraph with a custom title callout

A multi-paragraph callout

{: .important }
> A paragraph
>
> Another paragraph
>
> The last paragraph

A paragraph
Another paragraph
The last paragraph

{: .important-title }
> My important title
>
> A paragraph
>
> Another paragraph
>
> The last paragraph

My important title
A paragraph
Another paragraph
The last paragraph

An indented callout

> {: .highlight }
  A paragraph

A paragraph

Indented multi-paragraph callouts

> {: .new }
> > A paragraph
> >
> > Another paragraph
> >
> > The last paragraph

A paragraph
Another paragraph
The last paragraph

Nested callouts

{: .important }
> {: .warning }
> A paragraph

A paragraph

Opaque background

{: .important }
> {: .opaque }
> <div markdown="block">
> {: .warning }
> A paragraph
> </div>

A paragraph

Links

There are two ways to create links in just-the-docs:

Markdown links

You can create links using standard markdown syntax:

[Link text](URL)

Link to UTL website

HTML links

You can also create links using HTML syntax:

<a href="URL" target="_blank">Link text</a>  // target="_blank" opens the link in a new tab

Link to UTL

You can put the callout markup either before or after its content. ↩

Table of contents

Table of Contents

Header 1

Header 2

Header 3

Header 4 `with code not transformed`

Header 5

Header 6

There’s a horizontal rule below this.

Here is an unordered list:

And an ordered list:

And an ordered list, continued:

And an ordered list starting from 42:

And a nested list:

Nesting an ol in ul in an ol

And a task list

Nesting task lists

Nesting a ul in a task list

Nesting a task list in a ul

Labels

Definition lists can be used with HTML syntax.

Multiple description terms and values

More code

Syntax highlighting

Mermaid Diagrams

Collapsed Section

Images

Embed videos (iframe)

Callouts

An untitled callout

A single paragraph callout

A multi-paragraph callout

An indented callout

Indented multi-paragraph callouts

Nested callouts

Opaque background

Links

Markdown links

HTML links

Table of contents

Table of Contents

Header 1

Header 2

Header 3

Header 4 with code not transformed

Header 5

Header 6

There’s a horizontal rule below this.

Here is an unordered list:

And an ordered list:

And an ordered list, continued:

And an ordered list starting from 42:

And a nested list:

Nesting an ol in ul in an ol

And a task list

Nesting task lists

Nesting a ul in a task list

Nesting a task list in a ul

Labels

Definition lists can be used with HTML syntax.

Multiple description terms and values

More code

Syntax highlighting

Mermaid Diagrams

Collapsed Section

Images

Embed videos (iframe)

Callouts

An untitled callout

A single paragraph callout

A multi-paragraph callout

An indented callout

Indented multi-paragraph callouts

Nested callouts

Opaque background

Links

Markdown links

HTML links

Header 4 `with code not transformed`