Markdown basics

Read this webpage https://www.markdownguide.org/cheat-sheet/

this page show how particular styles are rendered on this web and how to use them within articles, etc.

Live Event Embed

Regular Video Embed

test

Headings

### H3 Heading
### H3 Heading as title{.title}
#### H4 Heading
##### H5 Heading
###### H6 Heading

creates

H3 Heading

H3 Heading as title

H4 Heading

H5 Heading
H6 Heading

Links

[Assemble](https://assemble.io) Renders to (hover over the link, there is no tooltip): Assemble

[Assemble](https://assemble.io "Visit us") Renders to (hover over the link, with tooltip): Assemble

Forms

Predefined forms:

  • career: Career submission form, contains Name, e-mail, phone, linkedin, position, CV upload, gdpr check. Action: sent email to xxxx@kpcs.cz
  • contact: rendered in every page on the bottom, contains: Name, e-mail, phone, subject, message, gdpr check. Action: create lead in CRM
  • register: Event registration form, contains: Name, e-mail, Phone, Company, gdpr check, 3rd party check. action: create lead in CRM
  • lead: to create full lead in CRM - TBD

Livestorm webinar registration

copy "Integrate registration form" from the webinar settings and put it on the bottom of the article. it will look like:

<iframe width="100%" height="360" frameborder="0" src="https://app.livestorm.co/p/469759f9-2e96-4bf6-ad10-e95bc5e1f98b/form"></iframe>

Integrated forms

use {% include 'forms/form.html.twig' with { form: forms('career') } %} at the end of the article to render the form:

Definition list

Apple
: Pomaceous fruit of plants of the genus Malus in the family Rosaceae.
: An American computer company.
Apple
Pomaceous fruit of plants of the genus Malus in the family Rosaceae.
An American computer company.

Foot notes

That's some text with a footnote.[^1]

[^1]: And that's the footnote.

That's some text with a footnote.1

Images

Images which need to cover full page width must be at least 1180px wide!

Here are some of the image action, more can be found at here

![ALT Text](image.jpg)

ALT Text

with caption ![ALT Text](image.jpg "Image caption")

ALT Text

lighbox (click on the image) ![ALT Text](image.jpg?lightbox=600,400)

ALT Text

resize exactly to width 300 ![ALT Text](image.jpg?&resize=300)

ALT Text

resize exactly to 300x300 ![ALT Text](image.jpg?&resize=300,300)

ALT Text

resize exactly to 300x300 and crop zoom ![ALT Text](image.jpg?&cropZoom=300,300)

ALT Text

resize exactly to 300x300 and crop zoom and center ![><](image.jpg?&cropZoom=300,300)

><

responsive 80% view width ![ALT Text](image.jpg?&sizes=80vw)

ALT Text

Align image right (float right) ![>](icon.png) >

Lorem ipsum (zkráceně lipsum) je označení pro standardní pseudolatinský text užívaný v grafickém designu a navrhování jako demonstrativní výplňový text při vytváření pracovních ukázek grafických návrhů (např. internetových stránek, rozvržení časopisů či všech druhů reklamních materiálů). Lipsum tak pracovně znázorňuje text v ukázkových maketách (tzv. mock-up) předtím, než bude do hotového návrhu vložen smysluplný obsah.

Center Image ![><](icon.png) ><

Align Image left (float left) ![<](icon.png) < Lorem ipsum (zkráceně lipsum) je označení pro standardní pseudolatinský text užívaný v grafickém designu a navrhování jako demonstrativní výplňový text při vytváření pracovních ukázek grafických návrhů (např. internetových stránek, rozvržení časopisů či všech druhů reklamních materiálů). Lipsum tak pracovně znázorňuje text v ukázkových maketách (tzv. mock-up) předtím, než bude do hotového návrhu vložen smysluplný obsah.

Image Gallery for selected images

- ![](image.jpg?lightbox=80vw&cropZoom=200,200)
- ![](image1.jpg?lightbox=80vw&cropZoom=200,200)
- ![](image2.jpg?lightbox=80vw&cropZoom=200,200)
- ![](image3.jpg?lightbox=80vw&cropZoom=200,200)
- ![](image4.jpg?lightbox=80vw&cropZoom=200,200)

Image gallery for all article images

use {% include 'partials/imagegallery.html.twig' %}

Horizontal rules

___: three consecutive underscores
---: three consecutive dashes
***: three consecutive asterisks

creates

Markdown Semantic Text Elements

Bold **Bold**

Italic _Italic_

Deleted ~~Deleted~~

Inline Code code here Inline Code

`Inline Code` `code here` `Inline Code`

HTML Semantic Text Elements

I18N <abbr>I18N</abbr>

Citation <cite>Citation</cite>

Ctrl + S <kbd>Ctrl + S</kbd>

TextSuperscripted Text<sup>Superscripted</sup>

TextSubscripted Text<sub>Subscripted</sub>

Underlined <u>Underlined</u>

Highlighted <mark>Highlighted</mark>

<time>20:14</time>

x = y + 2 <var>x = y + 2</var>

Blockquote

The advance of technology is based on making it fit in so that you don't really even notice it, so it's part of everyday life.

Bill Gates

> The advance of technology is based on making it fit in so that you don't really even notice it,
> so it's part of everyday life.
>
> <cite>Bill Gates</cite>

Unordered List

A list of items in which the order of the items does not explicitly matter.

You may use any of the following symbols to denote bullets for each list item:

* valid bullet
- valid bullet
+ valid bullet
  • list item 1
  • list item 2
    • list item 2.1
    • list item 2.2
    • list item 2.3
  • list item 3
* list item 1
* list item 2
    * list item 2.1
    * list item 2.2
    * list item 2.3
* list item 3

Ordered List

  1. list item 1
  2. list item 2
    1. list item 2.1
    2. list item 2.2
    3. list item 2.3
  3. list item 3
1. list item 1
1. list item 2
    1. list item 2.1
    1. list item 2.2
    1. list item 2.3
1. list item 3

Table

Name Genre Release date
The Shawshank Redemption Crime, Drama 14 October 1994
The Godfather Crime, Drama 24 March 1972
Schindler's List Biography, Drama, History 4 February 1994
Se7en Crime, Drama, Mystery 22 September 1995 
| Name                        | Genre                         | Release date         |
| --------------------------- | ----------------------------- | -------------------- |
| The Shawshank Redemption    | Crime, Drama                  | 14 October 1994      |
| The Godfather               | Crime, Drama                  | 24 March 1972        |
| Schindler's List            | Biography, Drama, History     | 4 February 1994      |
| Se7en                       | Crime, Drama, Mystery         | 22 September 1995    |

Left, Right aligned, centered text

Adding a colon on the right side of the dashes below any heading will right align text for that column.

Name Genre Release date
The Shawshank Redemption Crime, Drama 14 October 1994
The Godfather Crime, Drama 24 March 1972
Schindler's List Biography, Drama, History 4 February 1994
Se7en Crime, Drama, Mystery 22 September 1995 
| Name                        | Genre                         | Release date         |
| :-------------------------- | :---------------------------: | -------------------: |
| The Shawshank Redemption    | Crime, Drama                  | 14 October 1994      |
| The Godfather               | Crime, Drama                  | 24 March 1972        |
| Schindler's List            | Biography, Drama, History     | 4 February 1994      |
| Se7en                       | Crime, Drama, Mystery         | 22 September 1995    |

Notices

The notices styles are actually provided by the markdown-notices plugin but are useful enough to include here:

This is a warning notification

This is a error notification

This is a default notification

This is a success notification

! This is a warning notification
!! This is a error notification
!!! This is a default notification
!!!! This is a success notification

Block code "fences"

Use "fences" ``` to block in multiple lines of code with a language attribute

```html
```powershell
```markdown
Sample text here...

  1. And that's the footnote. ↩