ADF2MD
ADF2MD offers you conversion of Atlassian's ADF (Atlassian Document Format) syntax into GitHub-flavored markdown, and conversion of GitHub-flavored markdown into ADF objects. Coverage for Atlassian-specific nodes is provided through MDX-style extension of the Markdown standard.
Why?
Because no developer wants to use a WYSIWYG editor to write notes.
Install
ADF2MD can be included as part of your project, or installed via CDN in the browser.
NPM
You can install the package via NPM:
npm install adf2mdThen, import the required functions into your project as needed:
import { convert, preview } from 'adf2md';If you're making use of the preview function, don't forget to include the stylesheet, adf2md.min.css, somewhere in your document or bundle.
Browser/CDN
Include the <script> and <link> tags in your documents' <head> from UNPKG, or another CDN:
<script src="//unpkg.com/adf2md@latest/dist/adf2md.min.js">
<link rel="stylesheet" href="//unpkg.com/adf2md@latest/dist/adf2md.min.css">Usage
ADF2MD includes two basic functions for working with markdown and the Atlassian Document format:
ADF2MD.convert()
Use ADF2MD.convert() to convert an ADF object into a markdown string or a markdown string into an ADF object.
| Arg | Default | Description |
|---|---|---|
adfOrMd |
The ADF object to convert into markdown or the markdown to convert to ADF. |
(async () => {
const markdown = await fetch('https://xyz.atlassian.net/issues/ATL-22', {
method: 'GET',
headers: { Authorization: 'Bearer ...' },
})
.then((res) => res.json())
.then(({ fields: { description } }) => ADF2MD.convert(description));
console.log(markdown);
})();ADF2MD.preview()
Use ADF2MD.preview() to render an ADF object or ADF-style extended markdown string as GitHub-flavored markdown.
| Arg | Default | Description |
|---|---|---|
adfOrMd |
The ADF object or markdown to preview. | |
el |
'body' |
The target element or element selector where the preview should render. |
fetch('https://xyz.atlassian.net/issues/ATL-22', {
method: 'GET',
headers: { Authorization: 'Bearer ...' },
})
.then((res) => res.json())
.then(({ fields: { description } }) =>
ADF2MD.preview(description, '#markdown-preview'),
);Coverage
ADF2MD offers coverage for the following ADF nodes:
| Node | Status | Notes |
|---|---|---|
blockquote |
Full Support | |
bulletList |
Full Support | |
codeBlock |
Full Support | |
emoji |
Full Support | |
hardBreak |
Full Support | |
heading |
Full Support | |
inlineCard |
No Support | |
listItem |
Full Support | |
media |
No support | |
mediaGroup |
No support | |
mediaSingle |
No support | |
mention |
No support | |
orderedList |
Full Support | |
panel |
Full Support | Using MDX-style admonition. |
paragraph |
Full Support | |
rule |
Full Support | |
table |
Partial Support | Column alignment is not supported in ADF. |
tableCell |
Partial Support | Column alignment is not supported in ADF. |
tableHeader |
Partial Support | Column alignment is not supported in ADF. |
tableRow |
Partial Support | Column alignment is not supported in ADF. |
text |
Full Support | |
code |
Full Support | |
em |
Full Support | |
link |
Full Support | |
strike |
No Support | |
strong |
Full Support | |
subsup |
No Support | |
textColor |
No Support | |
underline |
No Support |
License
MIT License | Copyright (c) 2022 Stephan Casas