Support for rendering links inside `dcc.Markdown` as `dcc.Link` for single page dash apps

[chriddyp]

I use dcc.Markdown really extensively in dash-docs. It's great! However, a few things would make my life a lot easier:

1. (Done!) GitHub style language tags, that is:

``python
def dash():
     pass

Edit - This has been done!

2. Ability for the hyper links to use dcc.Link instead of the HTML link

Currently, I have to break out my dcc.Link from dcc.Markdown, which is pretty tedious:
https://github.com/plotly/dash-docs/blob/58b6f84f2d8012d1ae686f1379f326a292370ee3/tutorial/getting_started_part_2.py#L260-L269

3. (Done!) Automatic dedenting. Right now, I use textwrap.dedent everwhere in my text. If I don't use dedent, then the markdown is formatted as code (4 indents in markdown is code). It would be nice if I could just pass in dedent=True or something

Edit - This has been done!

[chriddyp]

I haven't investigated this at all, I don't have a sense of how easy or difficult these items would be

[chriddyp]

it could be a new component. similar to how github has "github style markdown", we could have DashMarkdown or something 😺

[wbrgss]

re: syntax highlighting, dcc.Markdown already paves the way for "GitHub-style" language tag support, in that it will add the tag class="language-python" to code snippets, e.g.

    ``` python
    def dash():
        pass
    ```

will get evaluated as

<code class="language-python">
"
def dash():
    pass
"
</code>

This is behaviour suggested by the HTML spec:

There is no formal way to indicate the language of computer code being marked up. Authors who wish to mark code elements with the language used, e.g. so that syntax highlighting scripts can use the right rules, can use the class attribute, e.g. by adding a class prefixed with "language-" to the element.

As such, established syntax highlighting libraries such as highlight.js and prism.js support this CSS class name, and in theory dcc.Markdown simply needs to include one of these libraries to enable syntax highlighting.

[ned2]

I would really love it if there was a component that automatically dedented strings! it get's a bit tiresome wrapping the string with that each time when writing Dash documentation.

It could potentially be a flag that could be switched off too.

[chriddyp]

The only remaining item in here is to treat relative links like dcc.Link (event emitters that send events to dcc.Location rather than a true link) and treat absolute links as regular html.A links.

We might have to make this opt-in, as there might be relative links that aren't Dash links. Not sure what to name this. Some options:

• treat_relative_links_as_dcc_link
• use_spa_links
• render_a_as_link
• spa_links
  ...

[wbrgss]

I think we could use the support for custom "renderers" in react-markdown to accomplish the dcc.Link link (or dcc-link-like) rendering. Something like a LinkRenderer function could detect a URI vs a rel path and return the appropriate element. So the Markdown React element

dash-core-components/src/components/Markdown.react.js

Lines 115 to 119 in eb38442

	<Markdown
	source={displayText}
	escapeHtml={!dangerously_allow_html}
	/>
	</div>

would take a prop e.g.

<Markdown
  ...
  renderers={{link: LinkRenderer}}
/>

link is one of the supported node types that take a custom renderer. There's a nice example of this pattern from the react-markdown creator here.

[alexcjohnson]

Can we find a way to expose this within the markdown syntax, rather than having a prop to decide for all relative links in that component? Would be nice, for folks hosting multiple dash apps on the same domain for example, if each link decided that on its own.

What about prefixing the url with a special character? so [Other app](/app2) would be a regular <a> but something like [Other page](%/page-2) would be a <Link>?

[Marc-Andre-Rivet]

I wonder if this is sufficient and whether all Markdown libraries expose syntax extensions / augmentations https://github.com/jonschlinkert/remarkable/blob/master/docs/plugins.md

Parsing rules are divided into three differents kind of rules (core, block and inline).