Pambda logo
Share your expertise

Example of webpage created from a markdown file

This page has been calculated from a markdown file. The source file shows the basic markdown syntax plus some variations allowed by pandoc.

(optional) Table of Contents

Inline/Character formatting

You can use several character formats :

You can write emojis 😄

You can insert links to other pages of your website using relative paths, from the folder of the current file towards the target file: e.g., a link to the manual or a link to the “About” page. Thus links in your file are also valid and allows navigating between your files within your word processor.

You can insert links to external web pages, like For this you need to write the protocol at the beginning: usually https:// or http://.

You can write emails and phone numbers:

You can insert a link targeting a section of a webpage using yourwebpage.html#the-section. For instance this is a link to the section named “Inline/Character formatting”, of this page.

Here are some ways to find the link to a section : (i) Get the link thanks to automatically displayed anchor links. On websites built with our services, an anchor link usually becomes visible when you move your mouse on the title of a section.

Anchor link

Then make a right-click on the anchor and copy the corresponding link. (ii) Second solution, is to copy the link in a table of contents. (iii) A last solution is to inspect the source code of the targeted page, looking for a putative “id” of the target.

Be aware that:


You can use colors with the CSS style attribute color: e.g., some coloured inline text. All available CSS color and color names can be previewed online. Color definitions can use the hexadecimal format, e.g. #0000ff.

Paragraph formatting

New line and new paragraph

A paragraph is a set of lines that ends with the first empty line. If you want a new line inside a paragraph, finish the line with a backslash “\”
After an empty line, it’s a new paragraph.

Paragraphs alignment

By default, all paragraphs are left-aligned. But you can also enforce a left-alignment yourself, with the paragraph style text-align:left.

A centered paragraph with the paragraph style text-align:center.
This second line belongs to the centered paragraph.
And this third line is centered too.

Here is a justified paragraph, with the paragraph style text-align:justify, that does its best to distribute words horizontally between the text borders. Unfortunately, sometimes, this alignment causes big spaces between words of the same line.

And a right-aligned paragraph with text-align:right.


You can write notes


bulleted lists,

numbered lists

  1. A
  2. B
  3. C

and definition lists

another description

Layout formatting


You can write paragraphs in columns.

This is the first column.

Qui nostrud occaecat excepteur enim incididunt anim sit officia laboris aliquip qui aute. Tempor ad labore aute sunt occaecat occaecat sit veniam consequat proident velit Lorem eiusmod non. Quis adipisicing cillum officia laboris mollit aute labore.

and this is the second column.

Officia est do dolore quis nulla ut in duis officia ea ea. Lorem dolore elit proident dolor exercitation veniam excepteur ex incididunt ex. Culpa anim pariatur incididunt ad adipisicing deserunt officia quis consequat exercitation minim. Labore Lorem irure do quis aute occaecat anim eu dolore.

Horizontal separators

You can insert horizontal separators


Media insertion workflow

When you want to insert a media (e.g., a picture, a video, an audio) in your webpage:

  1. Create a folder next to your markdown file
  2. Rename the folder and give it the name of your markdown file.

For instance, given that your markdown file is, in this case rename the folder into i_love_pandas.

  1. Put your media inside the folder: e.g., panda.png.
  2. In the markdown file, insert the image using ![Description of your image](i_love_pandas/panda.png "A text shown on mouse hover"){ width=25% }


Bitmap images

You can insert standard (bitmap or raster) images (jpeg or png)

Description of the small panda image

and control the size of images from the markdown file.

Description of the big panda image

Vector images

You can insert vector images and control their size

Some vectorial art

For vector images, you need to define a size.

Animated images

You can insert animated images (GIF) and control their size

Description of the big panda image


You can insert tables

Table cells Are well aligned
col 1 is left-aligned A
col 2 is centered B
col 3 is right-aligned C

Math equations

You can insert math formulas with the Latex syntax: e.g., \(x^2 + y^2 = z^2\).

As well as blocks of math equations

\[ x=\frac{-b\pm\sqrt{b^2-4ac}}{2a} \]


Possibilities are endless since you can even write in html inside your file !

Example of complex html block

You can define columns, insert an image – animated or not – from a web URL and control image positions.

You can
whatever you want
in raw html
A panda dancing
A panda resting


You can embed pdf files …

This browser does not support PDFs. Please download the PDF to view it.

… or insert a link to download the pdf file.


You can play sounds from an uploaded mp3 file


You can play a video from an uploaded video file. Either using the WebM encoding (flower.webm) …

… or with the MPEG-4 encoding (beach.mp4)


You can insert iframes and control their size and their aspect-ratio constraint.

Youtube videos
Google calendars
Google maps

Webpage metadata

The markdown file format allows to set the metadata of the computed webpage, like the title of the webpage. This is defined by writing a metadata header at the top of your markdown file, like this:

title: ' Example of webpage created from a markdown file'
author: 'Joseph Lucas'
date: '2020-11-10'
description: 'Example of webpage created from a markdown file'
keywords: 'Pambda,, pandoc, markdown, html, website'
header-includes: |
  <meta property="og:type" content="website" />
  <meta property="og:description" content=" Example of webpage created from a markdown file" />
  <meta property="og:url" content="" />
  <meta property="og:image" content="" />
  <meta property="og:image:type" content="image/png" />
  <meta property="og:image:width" content="1200" />
  <meta property="og:image:height" content="630" />
  <meta property="og:image:alt" content="Pambda" />
  <meta property="og:locale" content="en_US" />
  <meta name="twitter:card" content="summary\_large\_image">

Be careful, if you use single quotes (') within the value field, then write the values with double quotes (") rather than single quotes.

Edit the values at the right of “:” with the values you want.

Metadata aren’t mandatory but they have some utility: The title is displayed in the browser tab of the webpage. The title, the description and key-words helps search engines (like Google) to index your page. For more information about the long value of the field named “header-includes” see The Essential Meta Tags for Social Media.

Table of contents

If you want a table of contents, add this in the metadata block

toc: true
toc-title: 'Title of your table of Contents'
toc-depth: 2

For the navigation bar file, use a bulleted list, for instance:

- `<a>Lang</a>`{=html}
  - [English](
  - [Français](
- [Home](index.html)
- [Services](services.html)
- `<a>Documentation</a>`{=html}
  - [Manual](Documentation/
  - [FAQ](Documentation/
- [Blog](blog.html)
- [About](about.html)
- [Contact](contact.html)