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 :

• italic
• bold
• underlined
• supper^script
• sub_script
• crossed words

You can write emojis 😄

Links

Links to other pages of your site

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.

Links to outside

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

You can write emails and phone numbers:

john@doe.com
(+33).6.12.34.56.78

Link to a section of a webpage

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.

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:

• the-section must be in lower case, with hyphens (-) between words
• all backslashes (\) and all simple quotes (') must be removed

Colors

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

Notes

You can write notes

Lists

bulleted lists,

• first point
• 2^nd point
• …

numbered lists

1. A
2. B
3. C

and definition lists

Item1

description

Item2

another description

Layout formatting

Columns

You can write paragraphs in columns.

Horizontal separators

You can insert horizontal separators

Insertions

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 i_love_pandas.md, in this case rename the folder into i_love_pandas.

3. Put your media inside the folder: e.g., panda.png.
4. 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% }

Images

Bitmap images

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

and control the size of images from the markdown file.

Vector images

You can insert vector images and control their size

For vector images, you need to define a size.

Animated images

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

Tables

You can insert tables

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} \]

Raw HTML

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
do
whatever you want
in raw html

Pdf

You can embed pdf files …

… or insert a link to download the pdf file.

Audio

You can play sounds from an uploaded mp3 file

Video

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)

iframes

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: 'Pambda.com: 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, Pambda.com, pandoc, markdown, html, website'
header-includes: |
  <meta property="og:type" content="website" />
  <meta property="og:description" content="Pambda.com: Example of webpage created from a markdown file" />
  <meta property="og:url" content="https://pambda.com/Documentation/markdown-formatting.html" />
  <meta property="og:image" content="https://pambda.com/index/logo-social-networks.png" />
  <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

Navigation bar

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

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