question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Markdown conversion to HTML of links and images don't convert near <p> block

See original GitHub issue

I don’t get why I get this behavior near paragraph tags. Look at the string variable below. The result I get is:

<p><strong>Note</strong>: When sent as a Bearer token</p> ![External Groups Whitelist field](images/external-groups-whitelist.png)

If I change the paragraph tag to span tag I get:

<p><span><strong>Note</strong>: When sent as a Bearer token</span> <img src="images/external-groups-whitelist.png" alt="External Groups Whitelist field" /></p>

Which is the desired behavior. Why is that? Is there an extension I’m missing? Thanks!

		String content = 
				"<p><strong>Note</strong>: When sent as a Bearer token</p> ![External Groups Whitelist field](images/external-groups-whitelist.png)";
		
		MutableDataHolder OPTIONS = new MutableDataSet();
		OPTIONS.setFrom(ParserEmulationProfile.MARKDOWN);
		OPTIONS.set(Parser.HEADING_NO_ATX_SPACE, true); // !
		OPTIONS.set(Parser.EXTENSIONS, Arrays.asList(TablesExtension.create()));
		Parser parser = Parser.builder(OPTIONS).build();
		
		HtmlRenderer renderer = HtmlRenderer.builder(OPTIONS).build();

		try {
			Node document = parser.parse(content);
			String result = renderer.render(document);
			System.out.println(result);
		} catch (Exception e) {
			throw new RuntimeException("Process md exception");
		}

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:5 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
vschcommented, Jan 24, 2019

@Dan4ito, thank you for the compliment.

BTW, if you are not sure of why your markdown renders the way it does, you can always dump the AST and that will make it easier to follow:

        Node document = PARSER.parse(markdown);

        System.out.println(new AstCollectingVisitor().collectAndGetAstText(document));
        System.out.println("\n--------------------------------------------------------------------------------\n");

AstCollectingVisitor is found in flexmark-test-util module and will output the AST in human readable form, with offsets into original text and important node attributes shown.

It is used to generate the AST for test cases so you can rely on its contents.

0reactions
vschcommented, Jan 25, 2019

@Dan4ito, the side-effect is that rendered HTML will have HTML block elements in p tags and nested p tags. Depending on your requirements it may be an issue.

Effectively, all HTML will be wrapped in p tags since it will all be treated as inline HTML.

<p><p><strong>Note</strong>: When sent as a Bearer token</p> <img src="images/external-groups-whitelist.png" alt="External Groups Whitelist field" /></p>

If you want to change what HTML is treated as block tags instead of turning all of them off. See Parser.HTML_BLOCK_TAGS, it is a List<String> of all HTML tags to treat as block tags.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Markdown Syntax Documentation - Daring Fireball
Markdown is not a replacement for HTML, or even close to it. Its syntax is very small, corresponding only to a very small...
Read more >
How to Convert Markdown to HTML - Adam the Automator
To convert Markdown to HTML using Typora, click File —> Export —> HTML. Then save the file in your preferred location. The image...
Read more >
Handbook Markdown Guide - GitLab
Read through our Markdown kramdown Style Guide!
Read more >
WMD markdown editor - HTML to Markdown conversion
Update: I found an html to markdown converter called markdownify. I guess this might be the best solution for displaying the markdown back...
Read more >
Improving The Accessibility Of Your Markdown
Markdown is a small text to HTML conversion language. It was created by John Gruber in 2004 with the goal of making writing...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found