Gitenberg: customize markdown-it for blocks

[bangank36]

Summary

• So far the Gitenberg: Add sample block #7 introduced the new block (Shields Badge), which is image underline, so the block will be parsed as image block on load
• We need to tweak the markdown-it library to parse the images into Shields Badge based on its src attribute
• First attempt with overridden renderer is not working as the generated HTML image is wrapped inside a p tag, check the below comment

Reference

• https://publishing-project.rivendellweb.net/customizing-markdown-it/?fbclid=IwAR0cb6_QtZkOUhX7sAjEEKjEvBLbrwGTT1rurU6zFmFOwhZ-etxi66w1Ib0
• Different approach to detect block image and inline https://github.com/rotorz/markdown-it-block-image/blob/master/lib/index.js
• Center align text? Use p align attribute https://github.com/badges/shields/blob/master/README.md?plain=1

[bangank36]

28 May 2023

Output	HTML

• Given HTML output can be like
  • nit: extract the config from the URL params

<!-- wp:gitenberg/shields-badge -->
    <div class="wp-block-gitenberg-shields-badge">
	<img src="https://shields.io/badge/style-flat--square-green?label=healthinesses&amp;logo=appveyor&amp;logoColor=violet&amp;logoWidth=40&amp;labelColor=abcdef&amp;color=fedcba&amp;style=flat-square"/>
    </div>
<!-- /wp:gitenberg/shields-badge -->

[bangank36]

Update

• Put this into triage stage as the issue with p tag still not be resolved
• Can we add the inline-images into paragraph directly? Imagine a new toolbar button like the Bold control

[bangank36]

Notes

• Can we somehow transform the content BEFORE parsing it into rawHTML
  • Like, detecting the image tag inside a container is shields.io src and wrap it with shields badge block