Influencing markdown rendering

[MysterieDev]

Hey, i am currently writing a theme and integrating Bulma.

Now im asking myself if it is also possible to influence how single content blocks look or are structured, for example a notice (wihich you currently only style using your css classes) as in how it is rendered in html?

Im not too far into Symfony or Slim so i couldn't look into the Markdown-Render Logic yet.

Sincerely Josef

[MysterieDev]

so i see, that there is some rendering happening. in my case influencing the css-classes helps alot already.

I'd rather do it with javascript now, which is no problem for me, but serverside-rendering would be more bullet proof.

As an example using bulma for notifications https://bulma.io/documentation/elements/notification/

doing it influencing your core system:

$Block = [ 'element' => [ 'name' => 'div', 'handler' => array( 'function' => 'linesElements', 'argument' => (array) $text,} 'destination' => 'elements', ), 'attributes' => [ 'class' => "notification is-primary", ], ], ];

doing it with JavaScript:

window.addEventListener("DomContentLoaded", ()=>{ document.querySelectorAll('.notice1').forEach(el=>{ el.classList.add('notification', 'is-primary'); el.classList.remove('notice1'); }) document.querySelectorAll('.notice2').forEach(el=>{ el.classList.add('notification', 'is-secondary'); el.classList.remove('notice2'); }) })

This is not the finest way though, as it can give the user flickering depending on how fast the page loads.

[trendschau]

Yes, you are right, you have to change the markdown renderer to add classes to elements. I use parsedown and some own extensions for non-standard stuff like notice elements. Right now you cannot hack into the renderer directly. I did not work with Bulma yet (I use Tachyons), but if something is not accessible with a framework, I usually write some custom css to style things.

The only way to change the classes right now is with a plugin, but I doubt that it makes sense because your theme depends on a plugin then. Next problem is the performance: With a plugin you can hack into the content-array before it is transformed into html (see https://typemill.net/plugin-developers/event-overview event "oncontentArrayLoaded"), but then you have to loop over the whole content array, check for notice elements and change the class in the array. It is possible, but maybe the JavaScript solution is smarter.

I wouldn't change the core code for a specific frontend framework, there are too many of them. But maybe it is a solution in future to add another configuration in yaml where you can add css-classes for html elements in your theme and use them in parsedown. I have to think about it a bit, but I won't have time to implement it in next weeks because of other tasks on the roadmap...

[MysterieDev]

@trendschau the dream for an developer would be if you could have a folder called /blocks/ in a theme in which you can structure each contenblock.

an example instead of

<div class="notice1"> {{markdown}} </div> default notice.twig

<div class="notice1">
<h2> be noticed! </h2>
 {{markdown}} 
</div>

overwrite notice.twig

But well, Bulma Integration works for me with the Tools given, i was just curious about the possibilities as i am not really profound with the tools used.

[trendschau]

Well, that totally contradicts the way how the markdown parsers work.

But it is a nice idea, let me think about it :D

[MysterieDev]

i actually think that this feature is kind of in the new typemill version with shortcode plugins!

[trendschau]

Still a very nice idea. I will try to allow limited html-elements in markdown soon, maybe with shortcode logic, so you have some more flexibility. Changing the rendering in parsedown is too complicated right now. I will close this for now because I want to focus on bugs-reports in issues, for everything else the github-questions/answers is the best place