Getting Started

Our platform is designed to enhance Markdown content creation by introducing modern features that enrich the final rendering and visual presentation of your text. To achieve this goal, we have developed a component system based on a simple and minimalist syntax. This system provides content creators with a range of tools and the flexibility needed to organize and structure their documents effectively, resulting in a professional, modern, and visually appealing presentation.

Recommended Best Practices

We recommend that users take advantage of our Markdown editor, which integrates several tools specifically designed to simplify and accelerate content creation. These tools include:

A simple and intuitive Markdown editor Fully compatible with both native Markdown syntax and our component syntax, it delivers a productive and supportive content creation experience.
A range of customizable components Ready to be used in your documents without writing a single line of code, allowing you to focus entirely on your content.
A media file upload tool Enables you to upload files and retrieve their URLs for direct use within your Markdown documents, eliminating the need for external tools.
A Markdown file import tool Allows you to upload a Markdown file from your local machine and edit it within our editor while benefiting from all available features.
A real-time preview tool Lets you see how your Markdown documents will render as you create them, making it easy to adjust both content and visual presentation to meet your needs.

Super Markdown Component System

In the coming soon, we will open our Markdown component management system to the community. This will allow users to create their own components and publish them either publicly or privately, according to their own policies and preferences.

Tips and Guidelines

This section presents a set of best practices aimed at optimizing the final output of your content using the tools at your disposal. Its goal is to facilitate the management of your documents and reduce the effort required to achieve a professional, modern, and attractive result.

color a portion of the text in a primary color

Code mode
Preview mode

Lorem ipsum dolor sit amet, ++consectetur adipiscing++ elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

color a portion of the text in a secondary color

Code mode
Preview mode

Lorem ipsum dolor sit amet, +++consectetur adipiscing+++ elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Add Primary background color a portion of the text

Code mode
Preview mode

Lorem ipsum dolor sit amet, ==consectetur adipiscing== elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Add Secondary backgropund color a portion of the text

Code mode
Preview mode

Lorem ipsum dolor sit amet, ===consectetur adipiscing=== elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Add Primary Marker color a portion of the text

Code mode
Preview mode

Lorem ipsum dolor sit amet, $$consectetur adipiscing$$ elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Add Secondary Marker color a portion of the text

Code mode
Preview mode

Lorem ipsum dolor sit amet, $$$consectetur adipiscing$$$ elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Add math equations inside in the standard text

To write mathematical equations within a text, use the symbol ^^^ LaTeX ^^^. See the example above for a clear understanding:

Code mode
Preview mode

Lorem ipsum dolor sit amet, ^^^ a^2 + b^2 = c^2 ^^^ elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Add math equations inside the params of the components

To write mathematical equations within the parameters of other components, use the symbol ^^ LaTeX ^^. See the example above for a clear understanding:

Code mode
Preview mode

:: table{theme="indigo-theme" font="sans-serif-font-global" align="align-left" box_type="container-full" columns="Tool||Usefulness"}
 :- row{content="Training Log||Note weights, sets, and how you feel."} :- row
 :- row{content="Photo every 2 months||Mirror is more reliable than the scale."} :- row
 :- row{content="Strength Test (estimated 1RM)|| ^^ a^2 + b^2 = c^2 ^^"} :- row
:: table

Components Parametres

Regarding component parameters, it's important to distinguish between those necessary for the proper functioning of certain components and those that are optional for the system. To optimize your Super Markdown code, it's recommended to remove unused parameters from your components. This practice helps to effectively simplify your final Super Markdown code. For example, in this document, We will use the Header component in simple mode, so we can declare the component code as follows:

Code mode
Preview mode

:: header{theme="blue-theme" mode="mode-simple" title="title of header" description="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt."} :: header

In this example, we have removed all unnecessary parameters to optimize our final Super Markdown code, making it more readable to read and modify later.

Navigation inside the documment

This section presents a simple tip for implementing internal navigation within your document. The goal is that when a user clicks a link or button, they are redirected to a specific section within the same document. This feature enhances how readers interact with your content and facilitates the creation of coherent links between closely related sections.

To implement this type of navigation, you must use the "id" parameter on the target component declarations.

Code mode
Preview mode

:: header{theme="purple-theme" mode="mode-text" font="serif-font-heading" align="align-left" box_type="container-view" button_link="#section-block" button_text="To section block" title="title of header" description="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."} :: header

_________


:: content{id="" theme="primary-theme" mode="mode-simple" font="serif-font-heading" align="align-left" box_type="container-view"}
 # title of content
 ______
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
  ______
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
  ______
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
  ______
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
  ______
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
:: content

---  
                    
:: block{id="section-block" theme="orange-theme" font="sans-serif-font-heading" align="align-center" box_type="container-view"}
  # Title of section block
  ______
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
:: block

What's Next ?

AI Agent Support : Getting Started with AI Agent Support
Fréquents Questions : A collection of frequently asked questions related to the platform
Super Markdown API : TGetting Started with Super Markdown API

Need help ? Our team is here to support you. Contact us or check our FAQ.

Getting Started

Layout Components Reference

Components Reference

Super Markdown API

Examples

LLM Integration

Agents IA Support

Github Integration

Color Themes

Icons

Custom Templates

Best Practices

Fréquents Questions

Platform Objective