Reddit has some markdown differences and it would be nice to automatically be able to convert Reddit markdown to HTML for displaying on web pages.
Most important differences are the superscript and table syntax.
Other features would be nice but not necessary.
Reddit-specific extensions
Superscript — Reddit has its own syntax (^text, ^(multiple words)) Nesting is supported (one^two^three)
Strikethrough — Reddit's syntax is different from the GFM extension (~~strikethrough~~) (Works already when strikethrough: true is set)
Spoilertext — Spoilertext (>!spoiler!<) is Reddit-specific. (Can be ignored as I don't think there is standard HTML for this?)Possibly a class (eg. <span class='md-spoiler-text'>) can be used for allowing custom styling and scripts?
Redditlinks and userlinks — Names of subreddits and Reddit users, prefixed with /r/, r/, /u/, and u/, are automatically linked. (Not critical, but would be a cool addition)Would be similar to GitHub mention support.
Rich text media — Reddit supports submissions containing images, videos, and gifs, and these are encoded into the Markdown with a customized inline image syntax. This feature is only supported by the Fancy Pants editor — the syntax would be prohibitively difficult to write manually at present. (Probably not worth implementing?)
Other differences
Tables — Tables on reddit can have only a single dash for alignment, for example:
| **Normal** | **Center** | **Left** | **Right** |
|-|:-:|:-|-:|
| A | B | C | D |
Currently with showdown, this only becomes a table when center is written as :--:, right as --: and left as :-- or --.
| **Normal** | **Center** | **Left** | **Right** |
|--|:--:|:--|--:|
| A | B | C | D |
> with no space currently does not create blockquotes or support other markdown
function redditPostToHTML(original) {
// fix Reddit tables to have at least two dashes per cell in the alignment row
let body = original.replace(/(?<=^\s*|\|\s*)(:?)-(:?)(?=\s*\|[-|\s:]*$)/gm, "$1--$2");
// convert superscripts in the form "^(some text)" or "^text" to <sup>text</sup>
const multiwordSuperscriptRegex = /\^\((.+?)\)/gm;
while (multiwordSuperscriptRegex.test(body)) {
body = body.replace(multiwordSuperscriptRegex, "<sup>$1</sup>");
}
const superscriptRegex = /\^(\S+)/gm;
while (superscriptRegex.test(body)) {
body = body.replace(superscriptRegex, "<sup>$1</sup>");
}
// convert user and subreddit mentions to links (can be /u/, /r/, u/, or r/)
body = body.replace(/(?<=^|[^\w\/])(\/?)([ur]\/\w+)/gm, "[$1$2](/$2)");
// add spaces after '>' to keep blockquotes (if it has '>!' ignore since that is spoilertext)
body = body.replace(/^((?:>|>)+)(?=[^!\s])/gm, function (match, p1) {
return p1.replace(/>/g, ">") + " ";
});
// convert markdown to HTML
let html = mdConverter.makeHtml(body);
// convert Reddit spoilertext
return html.replace(
/(?<=^|\s|>)>!(.+?)!<(?=$|\s|<)/gm,
"<span class='md-spoiler-text' title='Reveal spoiler'>$1</span>"
);
}
Reddit has some markdown differences and it would be nice to automatically be able to convert Reddit markdown to HTML for displaying on web pages.
Most important differences are the superscript and table syntax.
Other features would be nice but not necessary.
Reddit-specific extensions
Superscript — Reddit has its own syntax (
^text
,^(multiple words)
) Nesting is supported (one^two^three
)Strikethrough — Reddit's syntax is different from the GFM extension (
~~strikethrough~~
) (Works already whenstrikethrough: true
is set)Spoilertext — Spoilertext (
>!spoiler!<
) is Reddit-specific. (Can be ignored as I don't think there is standard HTML for this?) Possibly a class (eg.<span class='md-spoiler-text'>
) can be used for allowing custom styling and scripts?Redditlinks and userlinks — Names of subreddits and Reddit users, prefixed with
/r/
,r/
,/u/
, andu/
, are automatically linked. (Not critical, but would be a cool addition) Would be similar to GitHub mention support.Rich text media — Reddit supports submissions containing images, videos, and gifs, and these are encoded into the Markdown with a customized inline image syntax. This feature is only supported by the Fancy Pants editor — the syntax would be prohibitively difficult to write manually at present. (Probably not worth implementing?)
Other differences
Currently with showdown, this only becomes a table when center is written as
:--:
, right as--:
and left as:--
or--
.>
with no space currently does not create blockquotes or support other markdownExpected:
Actual:
![image](https://user-images.githubusercontent.com/20955511/179425714-3b037840-d76e-474c-b080-eafe0c39bafa.png)
Lists should order starting from 1
Expected:
Actual:
![image](https://user-images.githubusercontent.com/20955511/179426424-0a73f427-749c-4254-bdad-bafca1fe3485.png)
Expected:
Actual:
![image](https://user-images.githubusercontent.com/20955511/179425880-2b5398ee-0b10-420d-a1d2-d3fb3b275356.png)
See reference: https://www.reddit.com/wiki/markdown
Current workaround
(This only solves part of the issues)