Get Creative with HDH and Docusaurus
Markdown Capabilities
Thanks for checking out the Harness Developer Hub and learning more how to contribute. The HDH is powered by Docusaurus. Can leverage this Markdown File to see the facets of what is possible with Docusaurus's Markdown capabilities in an HDH styled post. Feel free to take a look at this page in raw format on GitHub.
Headings
H2 Heading Can see how different headings look.
H3 Heading
H3 Heading
H4 Heading
H4 Heading
H5 Heading
H5 Heading
Tables
| Column | Column | Column |
|---|---|---|
| 1. Row | ||
| Row | Row |
Details
Details are toggle elements.
Toggle Heading
Nested Toggle
Notes
These are called admonitions.
Note text.
Tip text.
Caution text.
Information text.
Danger text.
Tabs
Tabs can also now have direct query strings in this example.
- Tab One
- Tab Two
This is an TabItem 1.
This is an TabItem 2.
Code Formatting
Can enable syntax highlighting with these common languages.
console.log('Check out Harness, Today!');
Diagram
Docusaurus supports Mermaid Diagrams.
Images
In HDH, we provide a few ways to include images. We support the standard Markdown format to include also additional control to re-size.
Standard Include
Formattable Include
Can apply what an img tag in HTML would apply.
import harness_atl from './static/atlanta_light.png'
<img src={harness_atl} alt="Harness Atlanta" height = "300" width = "600" />
Lightbox / Image Expand
Can use the docimage plugin for this.
<docimage path={require('./static/atlanta_light.png')} />
Videos
Videos are great tools to embed. You can embed a video in your Markdown.
<docvideo src="https://www.youtube.com/watch?v=_Nj9EYYuSqY" />
Quotes
Software Delivery, made easy!
— Harness
Includes
Can include MD files as entire files. Import the asset as a tag then leverage the tag.
import CISignupTip from '/tutorials/shared/ci-signup-tip.md';
<CISignupTip />
If you don't have a Harness account yet, you can create one for free at app.harness.io