Advanced Markdown Guide

Markdown is a markup language that can be used with plain text to add formatting elements like bulleted lists, headings, links and images.

Propcart's CMS uses Markdown in many of our page templates.

This article discusses some advanced concepts and implementation details for using Markdown on Propcart page templates.

Before reading on, familiarize yourself with the Markdown Cheatsheet.

Why Markdown?

And why not a WYSIWYG ("what you see is what you get") editor or HTML?

• Markdown is easier to write, debug and style than HTML or WYSIWYGs.
• Most people can learn Markdown source more easily than HTML.
• Markdown was easier and safer for us to implement.

Don't like Markdown? Read About the CMS.

Adding a YouTube video

Our YouTube video Markdown implementation initially displays only the video thumbnail with a play button. Once that thumbnail is clicked, the YouTube iframe loads the embedded YouTube video. By loading the YouTube video only when there is a user intent to watch the video, this speeds up the page load time.

General Example

::: youtube https://www.youtube.com/embed/{videoId}
![thumbnail image alt text](https://path-to-your-image.com)
:::

Specific Example

Here's how we placed the YouTube video at the top of the Propcart About Us page.

::: youtube https://www.youtube.com/embed/deC0smBajYQ
![Propcart Marketplace Video](https://cdn.propcart.com/thumbnails/about-us1_1708024521510.jpg){width=632 height=340}
:::

renders HTML as:

<details>
  <summary>
    <p>
      <img
        src="https://cdn.propcart.com/thumbnails/about-us1_1708024521510.jpg"
        alt="Propcart Marketplace Video"
        width="632"
        height="340"
      />
    </p>
    <button>Play button</button>
  </summary>
  <div>
    <iframe
      title="YouTube video"
      width="600"
      height="338"
      data-src="https://www.youtube.com/embed/deC0smBajYQ?rel=0&amp;autoplay=1"
      src="about:blank"
      allow="accelerometer;autoplay;fullscreen;encrypted-media;gyroscope;picture-in-picture"
      allowfullscreen=""
    ></iframe>
  </div>
</details>

IDs added to H tags automatically

The HTML id attribute is used to specify a unique id for an HTML element. The value of the id attribute should be unique within the HTML document.

Our Markdown implementation automatically adds ID attributes to all H tags (<h1>, <h2>, <h3> etc.) using the text inside the H tag in strikethrough case.

Example

This Markdown:

## This H2 tag gets an ID

renders HTML as:

<h2 id="this-h2-tag-gets-an-id">This H2 tag gets an ID</h2>

IDs in <h*> tags allow you to create anchor points on a webpage, enabling direct linking to specific sections for easy navigation and reference. This is useful for creating a table of contents or allowing users to bookmark or share links that lead directly to a particular part of a page.

For the Basic page template, you can enable the Show table of contents? switch to add a sticky table of contents links on the right side of the page.

Adding Attributes like Classes

Our Markdown implementation supports adding attributes to Markdown elements by appending curly brackets {...} to the end of the element and then adding any attributes within the curly brackets using the attribute=value format.

Here are some examples:

General Example

This Markdown:

Some example text{ attribute1=value1 attribute2=value2 attributeN=valueN }

renders HTML as:

<p attribute1="value1" attribute2="value2" attributeN="valueN">
  Some example text
</p>

There is a common shorthand for class and id attributes that use a dot . for classes and a hashtag # for ids:

Adding a Class

This Markdown:

This is text below a title{.subtitle}

This also works{class=subtitle}

renders HTML as:

<p class="subtitle">This is text below a title</p>

<p class="subtitle">This also works</p>

Adding an ID

This Markdown:

This is a unique paragraph{#one-of-a-kind}

This is also unique{id=snowflake}

renders HTML as:

<p id="one-of-a-kind">This is a unique paragraph</p>

<p id="snowflake">This is is also unique</p>

Adding other attributes

Let's add some common attributes to an image.

This Markdown:

![Test image](https://cdn.propcart.com/help/test-image.jpg){.grid-image width=783 height=359 loading=lazy}

renders HTML as:

<img
  src="https://cdn.propcart.com/help/test-image.jpg"
  alt="Test image"
  class="grid-image"
  width="783"
  height="359"
  loading="lazy"
/>

Create a Grid of Images

Using the attributes feature above, we can create an image gallery grid.

This Markdown creates an unordered list of images:

- ![image 1](https://cdn.propcart.com/help/test-image.jpg)
- ![image 2](https://cdn.propcart.com/help/test-image.jpg)
- ![image 3](https://cdn.propcart.com/help/test-image.jpg)
- ![image 4](https://cdn.propcart.com/help/test-image.jpg)
  {.grid}

and renders HTML as:

<ul class="grid">
  <li>
    <img src="https://cdn.propcart.com/help/test-image.jpg" alt="image 1" />
  </li>
  <li>
    <img src="https://cdn.propcart.com/help/test-image.jpg" alt="image 2" />
  </li>
  <li>
    <img src="https://cdn.propcart.com/help/test-image.jpg" alt="image 3" />
  </li>
  <li>
    <img src="https://cdn.propcart.com/help/test-image.jpg" alt="image 4" />
  </li>
</ul>

In the your page's Advanced tab in the Style field, you can then define the styles for your .grid class:

ul.grid {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr 1fr;
  list-style-type: none;
  padding: 0;
}
@media (max-width: 480px) {
  ul.grid {
    grid-template-columns: 1fr;
  }
}

In this example, the grid has two columns of images on desktop screens and one column of images on mobile screens.

• 
• 
• 
•