Markdown Element with Syntax Highlighting

[kayvanaarssen]

Hi,

It would be really really nice to have an extended Markdown element in Elementor (Pro)
We have the Pro version ;)

We now use: https://github.com/JaxsonWang/WP-Editor.md
A really nice Markdown editor. But we are limited for styling.
We really would like to use this for our knowledgebase. Also other users can use it for knowledgebases etc.

It would be really nice to integrate markdown and the power of Elementor to make Documentation pages for clients or manuals. And than use markdown elements to highlet things or put in codeblocks.

For us we want to use it in our Public and internal KB.
Specially for internal we want to make a documentation page for each client and document things in there.
We really want to use Markdown for some things we put in there. But for example you cannot create columns with Markdown or "Tabs / Accordions" and that would be awesome to have. Also some more visual elements like photo gallery's to bundle images etc. etc.

Please let us know if this is possible as an extra element.

[turkmuhendisnet]

Elementor syntax highlighter problem is solved. The solution can be found at this link.
https://turkmuhendis.net/yayinlar/elementor-syntax-highlighter-problemi/

[kayvanaarssen]

If i understand the link correctly, the option that you solved this issue on is to convert markdown to html and put it in the HTML element correct?

That's a time consuming not wanted solution.
Why not add support for native markdown in a element?

[turkmuhendisnet]

A more practical method because Elementor does not support the plugin.
The links in the content convert the code blocks into html.

[danielmacuare]

I do agree with @kayvanaarssen. This does not seem a great solution.

+1 on Markdown as a feature request. This would make writing my blog posts so nice and enjoyable.

[acceleratxr]

I would love to see native markdown support as well. I noticed this while writing multiple blog posts where i'd start in the basic WordPress editor, markdown syntax used at that point seems to convert fine when converting the Elementor editor. However, I am unable to continue using markdown syntax with no easy way to do things like single quote code.

[shilo-ey]

Hey,

This feature is available in Elementor Pro using Code Highlight widget

Thanks

[kayvanaarssen]

@shilo-ey How? Since there is no option to select Markdown as language...
Like the examples we gave above...
What you are telling us now, is just an option to add code highlighting blocks.
Please take a better look at the context of this issue before closing it.

[m3h0w]

I wanted to make a programming blog and it turns out I'd have to spend ridiculous amounts of time translating my markdown posts to Elementor because of lack of markdown support.

This is such a rudimentary feature for which there are dozens of plugins. Even JetPack has it built-in but non of it integrates with Elementor. I think I'm going to request a refund since this makes Elementor a bad solution for my purpose.

@shilo-ey I find your response hasty and dismissive.

[trainingcity]

Has Elementor addressed this problem yet? Not supporting Markdown is a huge problem for sites that need to quickly integrate common docs from git repos, etc. I was amazed that it seems so difficult for elementor to deal with Markdown.

[crkrenn]

I asked ChatGPT, "Can I use a wordpress shortcode to format markdown as HTML?", and they responded as below.

I followed these instructions on a wordpress/elementor installation on hostlinger.com, and was able to insert markdown into an elementor page.

Yes, you can use a WordPress shortcode to format Markdown as HTML. To achieve this, you can integrate a Markdown parser (like Parsedown) with a custom WordPress shortcode.

Here's a step-by-step guide:

1. Install Parsedown using Composer (assuming you're using Composer with your WordPress project):

   In your terminal or command prompt:

   composer require erusev/parsedown

2. Create the Shortcode in your theme or plugin:

   Add the following code to your theme's functions.php file or within a custom plugin:

   require 'vendor/autoload.php';  // Ensure the Composer autoloader is included. Adjust the path if necessary.
   
   function markdown_to_html($atts, $content = null) {
       // Ensure the Parsedown class exists before using it
       if (!class_exists('Parsedown')) {
           return 'Parsedown class not found!';
       }
   
       $parsedown = new Parsedown();
   
       // Convert the markdown content to HTML
       return $parsedown->text(do_shortcode($content));  // Use do_shortcode to allow other shortcodes within
   }
   add_shortcode('markdown', 'markdown_to_html');

3. Usage in WordPress:

   Now, when editing posts or pages, you can use the [markdown] shortcode to format Markdown content as HTML:

   [markdown]
   # This is a header
   
   - List item 1
   - List item 2
   [/markdown]

   When the post or page is viewed, the enclosed content will be rendered as HTML.

Remember that, when adding or updating dependencies in a live environment, it's essential to test on a staging site first to ensure there are no compatibility issues.