Multiple markdowns cause identifier problems

[yigitguler]

Hi,

We are displaying multiple markdown texts on a single page. Everything worked fine, except when we tried to use Codehilite's tabbed view.

Since the ids of the Codehilite collide with each other, the JS code doesn't work. For example, the id of the code tabs are the same for 2 markdown areas md-fenced-code-tabs

Is there a way to render elements with a prefix?

[some1ataplace]

Yes, you can render elements with a prefix to avoid id collisions. Here's an example of how you can modify the markdownify function in django-markdown-editor to add a prefix to the ids of Codehilite's tabbed view:

from markdownx.utils import markdownify as original_markdownify

def markdownify(markdown_text, prefix=''):
    html_text = original_markdownify(markdown_text)
    if prefix:
        html_text = html_text.replace('id="md-fenced-code-tabs', 'id="{}-md-fenced-code-tabs'.format(prefix))
        html_text = html_text.replace('href="#md-fenced-code-tabs', 'href="#{}-md-fenced-code-tabs'.format(prefix))
    return html_text

In the above code, we first import the original markdownify function from markdownx.utils. Then, we define a new markdownify function that takes an optional prefix argument.

Inside the function, we call the original markdownify function to convert the markdown text to HTML. Then, if a prefix is provided, we use string replacement to add the prefix to the ids and hrefs of Codehilite's tabbed view.

For example, if you call markdownify(markdown_text, prefix='my-prefix'), the ids and hrefs of Codehilite's tabbed view will be rendered as id="my-prefix-md-fenced-code-tabs" and href="#my-prefix-md-fenced-code-tabs", respectively.

You can use this modified markdownify function in your Django views to render multiple markdown texts with unique ids.