Better executable code syntax in MD

[trusktr]

Problem

This is with reference to executeScript property. Currently, docsify checking an executable script tag using this
The markdown input for these doesn't look good ref

solution

if we are moving with pluggable markdown parser then create a plugin ( or use if exists ) to add custom syntax to uniquely identify some pre-coded syntax which can be replaced in the renderer.

[jhildenbiddle]

Making sure I understand the issue: The goal is to avoid <script> tags from being rendered as text when viewed outside of docsify, correct?

For example, in Typora, the following markdown:

# Heading

Text

<script>
  console.log('foo')
</script>

Will be rendered as follows:

Helper syntax options are limited if we want to keep markdown output clean when rendered outside of docsify. The options are 1) leverage existing markdown syntax (like a blockquote) or 2) use an HTML comment. Anything else is going to be rendered by markdown processors unless they specifically understand docsify's helpers syntax.

Perhaps something like this?

# Heading

Text

<!-- [script] src="path/to/script.js" -->

<!-- [script]
  console.log('foo')
-->

The downside to using comments-as-helpers is that syntax highlighting is lost. The upside is that it's valid markdown (because it's just HTML) and universally supported (because all markdown processors ignore HTML comments).

This ties into the larger discussion of what a standard docsify helper syntax could/should look like. For those interested in that discussion, #413 (comment) and #413 (comment) are worth reviewing.

[anikethsaha]

Making sure I understand the issue: The goal is to avoid <script> tags from being rendered as text when viewed outside of docsify, correct?

yes,

i was thinking if we can do like this

Note: I am using space between blockquote to stop the inner ones to rendered here. in while implementing , it will be usual blockquote we use for code snippets

  ` ` `docsify
  <script>console.log</script>
  ` ` `

this will render in non docsify as

<script>console.log</script>

in for docsify,
we can change the

` ` `docsify

to

` ` `js

while parsing and in this way, we can get the syntax highlighting as well.

[jhildenbiddle]

I don’t understand.

I thought the goal of this issue is to allow JavaScript to be added to markdown and executed by docsify while being completely ignored (i.e. not rendered, not executed) in other environments. The examples above will render code blocks in all environments (including docsify).

[anikethsaha]

actually, I was thinking if we need to show it on other env or not.

But yeah I agree, let's go with what was the original issue. Yea we can use the commented thing you mentioned. 👍

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[trusktr]

I think more something like this:

Here is a _neat_ example:

<!-- run-script -->
```js
console.log(foo)
```

which would render as:

---

Here is a neat example:

console.log(foo)

---

Also check out the syntax open-wc uses: https://open-wc.org/mdjs/. It is like this:

```js script
console.log(foo)
```

which renders as the following which apparently works in GitHub markdown, but not sure about other flavors:

---

console.log(foo)

---

If that last approach using ```js script works in a majority of places besides GitHub, then I think it would be the best synatx. However the comment approach I think works everywhere for sure. Any thoughts on ```js script?

[trusktr]

  ` ` `docsify
  <script>console.log</script>
  ` ` `

this will render in non docsify as

<script>console.log</script>

If we do that approach then it will have the wrong syntax color outside of Docsify.

[trusktr]

I thought the goal of this issue is to allow JavaScript to be added to markdown and executed by docsify while being completely ignored (i.e. not rendered, not executed) in other environments

Yeah that's the goal