CodeBlock issues

[davide-scalzo]

Hi there, awesome light little library :)

I've identified a few issues with code blocks, they are as follows:

• overrides code does not differentiate between the 3 code types internally, should be able to render differently based on the type of code node
• code blocks with 3 tick mark render as inlineCode if not preceded by two new lines

[BenBrewerBowman]

I am also running into this issue. I am not able to render a custom component for javascript vs python vs unspecified codeblocks.

[qkzzxb]

You can change index.js in 771 line

  : `${input.replace(TRIM_NEWLINES_AND_TRAILING_WHITESPACE_R, '')}\n`,

But I don't know what else will happen.

[ErikAGriffin]

I'm also having the issue whereby a <Markdown> tag that is conditionally rendered later does not add the class="hljs script-type" to the <code> blocks and also not include the individual <span> elements to highlight words.

For example, if using a tab system and the following:

{ aboutTab === activeTab && (
    <article className={styles.detailContent}>
      <Markdown className={styles.markdown}>{myMarkdown}</Markdown>
    </article>
)}

If the aboutTab === activeTab does not equal true on the initial page load, any codeblocks in that markdown are rendered like this:

<code>
my Code
    indented
    but all white
end
</code>

instead of this:

<code class="hljs angelscript">
my <span class="hljs-keyword">Code</span>
    indented
    <span class="hljs-keyword">but</span> all white
<span class="hljs-keyword">end</span>
</code>

The current workaround I've found is to use a class with display: none; to conditionally switch content vs. the use of jsx {condition && (<jsx>)}

[akemrir]

Same here. But I am rendering this markdown element on text area change, and it does not render code block properly.

[FerusAndBeyond]

Is this going to be fixed? This is quite a big issue for those that want to have custom code blocks.

[CodyCline]

One workaround is to create your code block with a highlighter of your choice (I used prismjs) and add it to the overrides as a custom component. I did this and it a allowed me to have a custom code blocks and an inline code that work nicely together.

Within markdown, All I had to do was call the codeblock like this <MyCodeBlock> and use inline code like this `code` . This may not be the best solution for everyone, but it suits my needs very well for the moment.

Implementation below:

import React from 'react';
import Markdown from 'markdown-to-jsx';
import { CodeBlock, InlineCode } from 'dir/to/your/component';

//Test string
const testMD = (`
#Title
This is some inline \`code\` to view.

<MyCodeBlock language="javascript">
const x = "myCodeBlock";
</MyCodeBlock
`);

<Markdown
  children={testMD} //Or other prop
  options={{
    overrides: { 
    code: InlineCode
    MyCodeBlock: CodeBlock,

    }
  }}
/>

[trulyronak]

Bump on this issue — markdown still renders CodeBlock content for inline code elements

[resilva]

What about propagating the code type as a props ?

It could be used with something (not tested :)) like that :

<Markdown
  children={...}
  options={{
    overrides: { 
        code: CustomCode
    }
  }}
/>

const CustomCode = (props: CustomCodeProps): React.ReactElement => {
    const { children, type } ⁼ props;

    // handle inline block
    if (type == 'inline') {
        return <span>{children}</span>
    }

    // Handle block code, with highlight for example
};

CustomCode.defaultProps = {
    type: 'block',
};

export type CodeProps = {
    children: ReactNode;
    type?: string;
};

I think it could be implemented with something like that, but I'm not accommodated with the lib code so it's probably not enough :

diff --git a/index.tsx b/index.tsx
index 9dae694..4a0ca12 100644
--- a/index.tsx
+++ b/index.tsx
@@ -1110,7 +1110,7 @@ export function compiler(
       react(node, output, state) {
         return (
           <pre key={state.key}>
-            <code className={node.lang ? `lang-${node.lang}` : ''}>
+            <code type={node.type ? node.type : 'block'} className={node.lang ? `lang-${node.lang}` : ''}>
               {node.content}
             </code>
           </pre>
@@ -1139,7 +1139,7 @@ export function compiler(
         }
       },
       react(node, output, state) {
-        return <code key={state.key}>{node.content}</code>
+        return <code key={state.key} type='inline'>{node.content}</code>
       },
     } as MarkdownToJSX.Rule<{ content: string }>,

It probably miss some things to be good but it describes the idea.

[eldos-dl]

• code blocks with 3 tick mark render as inlineCode if not preceded by two new lines

This issue means the library is not markdown compliant right?