linkMarkdown Features

CODEDOC parses markdown documents using @connectv/marked package, which is in turn based on marked. This means it supports following markdown flavours:

• CommonMark
• GitHub Flavored Markdown

Additionally, you can use quoted components syntax and linked components syntax of @connectv/marked. These allows for custom structural components (like buttons, tabs, etc.) to be used inside your markdown files, thereby greatly extending functionality of standard markdown.

linkComponent Syntax

linkQuoted Components

The quoted component syntax allows for using custom structural components using markdown's own block-quote element:

1linkSome other _markdown_ stuff

2link

3link> :Component1 attr1=value1, attr2=value2, ...                     <!--> Component definition -->

4link>                                                                 <!--> This new line is important, because markdown -->

5link> Contents of the component, which is simply **more markdown**.   <!--> More markdown to be included as contents of the component. -->

The first line of the block-quote must be the component reference, starting with :<component-name>. Arguments can be passed to the component via the attributes on the same line, with the syntax attribute=value separated by ,. Some components can also have child content, which can be any markdown content. This content MUST be separated from the first line by an empty line, as otherwise it might get interpreted as continuation of the component definition line (i.e. the first line).

Since components can have markdown content, this means you can use child components within a parent component as well:

1link> :ParentComponent attr=value

2link>

3link> Some content.

4link> > :ChildComponent child attr=child value, child attr 2=child value 2

5link> >

6link> > Child component's content

7link>

8link> > :SecondChildComponent

linkLinked Components

Similar to quoted components, the linked components allow for using custom structural inline components, i.e. components that are whithin other pieces of text, using markdown's link elements:

1linkI have some [custom markdown](:InlineComp (attr1=value1, attr2=value2, ...)) amongst

2linksome other **markdown** stuff I am writing.

The URL of the link should start with : followed by the inline component name, i.e. :<component-name>, and the title (for convenience put in parantheses in above example) can be utilized to pass arguments to the component, with the syntax attribute=value, separated by ,. The text of the link is passed to the component as its content, so it can be any markdown accepted as a link's text. Note that since you cannot nest markdown links inside each other, you CANNOT nest inline components inside each other as well.

Note that linked components and quoted components use separate component namespaces, so you can utilize the same component name for both a quoted component and a linked component.

linkDefault Components

linkTabs

1link> :Tabs

2link> > :Tab title=First Tab

3link> >

4link> > Content of the first tab

5link>

6link> > :Tab title=Second Tab

7link> >

8link> > Content of the second tab

linkButtons

1link> :Buttons

2link> > :Button icon=true, label=android, url=https://www.google.com

3link>

4link> > :Button label=Twitter, url=https://www.twitter.com

linkFootnotes

1linkSo you can have footnotes[just write them like this.](:Footnote).

2link

3link> :Footnotes

So you can have footnotesjust write them like this..

linkCollapse

1link> :Collapse label=Collapsible, default=open

2link>

3link> Some collapsible content

linkToC Navigation

1link> :ToCPrevNext

linkFormula

1linkLet [G](:Formula) be any consistent logic, and [s](:Formula) a statement

2linkin [G](:Formula) defined by [s \equiv G \cancel{\vdash} s](:Formula). Then:

3link

4link> :Formula

5link>

6link> G \vdash s \implies G \vdash (G \cancel{\vdash} s) \implies \bot \implies \neg{(G \vdash s)}

7link>

8link> G \vdash \neg{s} \implies G \vdash (G \vdash s) \implies G \vdash s \implies \bot \implies \neg{(G \vdash \neg{s})}

9link>

10link> \overset{\tiny \text{1,2}}{\implies} \neg(G \vdash s) \land \neg(G \vdash \neg{s})

11link

12linkWhich means [G](:Formula) cannot be complete, as it neither proves nor disproves [s](:Formula).

Let $G$ be any consistent logic, and $s$ a statement in $G$ defined by $s \equiv G \cancel{\vdash} s$. Then:

Which means $G$ cannot be complete, as it neither proves nor disproves $s$.

linkPage-Specific Meta

1link> :MetaOverride target=keywords, behavior=extend

2link>

3link> some, additional, keywords, for this particular page

MetaOverride component allows you to specify overrides for meta information of a particular page.

linkDark/Light Content

1link> :DarkLight

2link> > :InDark

3link> >

4link> > Only visible in dark. Change to light mode to see other stuff.

5link> > ![Night Image](https://9to5mac.com/wp-content/uploads/sites/6/2018/06/mojave-night.jpg?quality=82&strip=all&w=600)

6link>

7link> > :InLight

8link> >

9link> > Only visible in light. Change to dark mode to see other stuff.

10link> > ![Day Image](https://cdn.osxdaily.com/wp-content/uploads/2018/06/macos-mojave-day-wallpaper-r-610x343.jpg)

linkIcon

1linkYou can use icons like [face](:Icon) in the middle of markdown.

2linkCheckout [material design icons](https://material.io/resources/icons/?style=baseline)

3linkfor possible glyphs.

You can use icons like face in the middle of markdown. Checkout material design icons for possible glyphs.

linkWatermark

1link> :Watermark

linkCustom Components

With some knowledge of Typescript and TSX/JSX, you can create your own custom components that you can use in your doc markdowns. Codedoc simply uses CONNECTIVE SDH for its components system (including in-markdown components), which allows you to create even dynamic and fully interactive components in your markdowns (as every element you see in these docs is also a SDH component).