remarkjs / remark

markdown processor powered by plugins part of the @unifiedjs collective
https://remark.js.org
MIT License
7.66k stars 358 forks source link

How to display incomplete PHP code outside of a code block #1213

Closed charliematters closed 1 year ago

charliematters commented 1 year ago

Initial checklist

Affected packages and versions

Remark@10, Rehype@9

Link to runnable example

https://stackblitz.com/edit/github-uzm7cu?file=src%2Fmain.ts

Steps to reproduce

We have some users unfamiliar with markdown who are adding snippets of code in without code blocks. In one case, they are adding an incomplete php section:

Before
<?php
// PHP code
After

And reporting that it is not working as expected:

Before

I realise this is an education issue, however the first google result for a markdown editor (StackEdit) handles this case in a more expected way, outputting this:

Before

<?php // PHP code After

Expected behavior

The valid markdown after the PHP tag should still be shown, along with the incomplete PHP

Actual behavior

The PHP start tag stops any further output

Runtime

Node v17

Package manager

npm 8

OS

Windows

Build and bundle tools

Webpack

ChristianMurphy commented 1 year ago

Welcome @charliematters! 👋

TL;DR There is no bug, what you describe is how CommonMark works, the best approach would be to educate content authors on how standard markdown works.

Long version <?php triggers the start of an HTML block, and everything inside is interpreted as HTML attributes. (CommonMark reference implementation https://spec.commonmark.org/dingus/?text=Before%0A%3C%3Fphp%0A%2F%2F%20PHP%20code%0AAfter)

If authors aim is to show what PHP syntax looks like, they should use a code block

Before
```php
<?php
// PHP code

After


If the intent is to show the PHP content as plain text, escape it
````md
Before
\<?php
// PHP code
After

Or if the intent is to use the PHP as a pre-processor for markdown, run it through the pre-processor first.


Reading between the lines of your issue a bit, it sounds like content author may have an interest in adding interactive content or database backed content to the page? If so consider leveraging https://github.com/mdx-js/mdx/ or https://github.com/remarkjs/remark-directive

github-actions[bot] commented 1 year ago

Hi! This was closed. Team: If this was fixed, please add phase/solved. Otherwise, please add one of the no/* labels.

wooorm commented 1 year ago

Also: we support plugins. If you write a plugin, you can turn html into text, making it visible.

react-markdown at least has an option for it.

Perhaps you can share your actual setup so that we can practically help you.

charliematters commented 1 year ago

Thanks for the offer, and your answers have been really helpful.

I hate to be that person, but it's a proprietary codebase so can't share it.

We do actually have a bunch of plugins in our pipeline (some of which are hand-made), so I'm going to report back to the user that that's how (our) markdown works and add a low-priority ticket to work on a plugin which grabs those text nodes and renders them in a basic way