It seems like Tiny-mce do not accept these xml code even paste your xml code into Joomla article creation page, it also stripped those xml code.

Perhaps you can try switch to use Easyblog build-in composer from backend, so you can select "Code block" to populate that code on the blog content, you can check my attached screenshot below.

Hope this will help.

Is it also possible to add a "spoiler" to the post (where the Code is hidden and can be expanded).

Do you mean when the user click on the link so it will only show the code right? If yes, unfortunately that was not possible to achieve this.

Hi Arlex

Thank you - this composer is much cooler!
Another question - is it possible to shrink / expand the code blocks (see picture attached)?

Link to post: https://www.surwave.ch/index.php/blog/manage-ilo-over-esx-cli

Thank you.
Regards,
Adrian

You're welcome.

Unfortunately that was not possible to shrink / expand from the code block in current system.

Hi Arlex

Thats not verry nice.
Is there any workaround?

This shows like an entry level blog system.
Is there a possibility to insert to code on another way?
Or something which I can adjust the size?

Thanks.
Regards,
Adrian

Hey there,

I am really sorry for the delay of this reply as it is a weekend for us here.

Perhaps you can try to find 3rd party syntax highlighter plugin for Joomla and see whether those plugin can support this collapsed feature. When you find out one of the plugin support this, you have to switch back to use Tiny-MCE editor in order to for support those 3rd party plugin.

Or something which I can adjust the size?

May i know which size you would like to adjust?

Hi Arlex

I want to adjust the size of the code block to the size of the code.
It have to be possible?!

Do you have another solution?
Thank you.
Regards,
Adrian

You can apply this following css into JoomlaFolder/templates/YourCurrentTemplate/html/com_easyblog/styles/custom.css to adjust the code font size :

div#fd.eb .ebd-block[data-type='code'] .ace_editor {

    font-size: 9px !important;

} 

Note : you have to manually create those new folder and file from your template directory location.

Hi Arlex

I think you don't understand me.
I want to resize the container and not the font size.

Regards,
Adrian

Oh i understand now, can you try following css code and see how it goes?

div#fd.eb .ebd-block[data-type='code'] {

    height: 70px !important;

    overflow-y: scroll !important;

}

div#fd.eb .ebd-block[data-type='code'] pre {

    margin: 0px !important;   

}



div#fd.eb .ebd-block[data-type='code'] .ace_scrollbar-v {

    overflow-y: hidden;

}

Take note of this, that was not possible to solve all is because those code block height and the scrollbar calculation is coming from the js part instead of css, so that is not 100% to use CSS to solve this.

If the code block already generated the scrollbar, that was not possible to remove it, so I use css to hide it (but that scrollbar still there) and I replace to use outside the code block wrapper scrollbar.

Hi Arlex

Please see the result:
https://www.surwave.ch/index.php/blog/manage-ilo-over-esx-cli

I have changed the height to 500px and it looks really bad.
The target is, that the size is relative to the code block size.
Is it possible to handover this case to the developers?

Thanks.
Regards,
Adrian

I would like to ask 1 more question to understand your current requirement, is it you would like to display all the code without scrollbar?

If no, perhaps you can give us an example how the code block styling you would like to achieve here? Then I can extend to our designer to check on this and see whether possible to use css to control this?

Hi Arlex

Exactly I want to display all the code without a scroll bar.
So, that the size of the code block exactly fit the code.

Do you understand what I mean?
Thank you.
Regards,
Adrian

Thanks, I understand what you mean now.

And I already received our developer response regarding this, unfortunately that was not possible to use CSS to control this is because that is actually use JavaScript to render the dynamic hardcoded styling in the code block content, the whole Javascript is controlled by Github, how we populate the highlighting syntax on code block is just call the Github Javascript library and this is out of our control.

However, I did check further again and see whether there a way to use alternative way to achieve this, then I found out it seems like Tiny-MCE editor allow user to add xml/php/javascript/CSS into blog content, you can take a look of my attached screenshot, so it will not populate the scrollbar and show all the xml code on the page.

How to configure this? You have to go to your plugin manager page from backend , then find this plugin "Editor - TinyMCE", switch to use 'Extended' method from the functionality option, you can refer on my last attached screenshot below.

Hope this will help.