?
avatar okdotnz
okdotnz
29 May 2020

Steps to reproduce the issue

Add code sample in new article from backend.
backend

Expected result

View the code sample in the article from frontend.
frontend

Actual result

Code sample missing css

System information (as much as possible)

Joomla_4.0.0 beta1 dev

Additional comments

avatar okdotnz okdotnz - open - 29 May 2020
avatar joomla-cms-bot joomla-cms-bot - change - 29 May 2020
Labels Added: ?
avatar joomla-cms-bot joomla-cms-bot - labeled - 29 May 2020
avatar okdotnz okdotnz - change - 29 May 2020
The description was changed
avatar okdotnz okdotnz - edited - 29 May 2020
avatar okdotnz okdotnz - change - 29 May 2020
Title
CSS for Code Sample missing
[4.0] CSS for Code Sample missing
avatar okdotnz okdotnz - edited - 29 May 2020
avatar ReLater
ReLater - comment - 30 May 2020

Confirmed.

All I've found is this hint: https://www.tiny.cloud/docs/plugins/codesample/#usingprismjsonyourwebpage

You need to add prism.js and prism.css to your page in order to get the syntax highlighted code samples on your webpage (as created by the Code Sample plugin)

I don't know if it's planned to add another Joomla content core plugin for that.

There is one on the market but I don't know if @ahotzler has any plans with it for J4 because the new TinyMCE in J4 has already partially integrated the "Code Sample plugin"[Striked not relevant]. At the moment it needs a fix for front-end: https://github.com/ahotzler/plg_content_prismsyntaxhighlighter/pull/5/files

ahotzler/plg_content_prismsyntaxhighlighter#5

avatar ahotzler
ahotzler - comment - 31 May 2020

Thanks for your hint, I have adopted your change and the plugin now also works with Joomla 4 Beta 1.

I will continue to maintain my Prism plugin as long as there is no solution from Joomla! itself.

I will also update the version of PrismJS used in the plugin, but I will only be able to do that when the children are allowed back into the kindergarten due to corona.

avatar HLeithner
HLeithner - comment - 1 Jun 2020

If I understand the issue correctly there is only css missing for the frontend template right?

If so I don't think that this goes into core template because we would need to support "all" programming languages and that doesn't make much sense for a non programmer focused software.
And since we have a well maintained plugin we have a solution good solution for this issue.

I'm closing this, you can reopen it if you think I miss understood your issue.

avatar HLeithner HLeithner - close - 1 Jun 2020
avatar HLeithner HLeithner - change - 1 Jun 2020
Status New Closed
Closed_Date 0000-00-00 00:00:00 2020-06-01 09:36:32
Closed_By HLeithner
avatar ahotzler
ahotzler - comment - 1 Jun 2020

The problem, at least in Joomla! 3 is that the functionality of the TinyMCE could not be used at all in the frontend, but only in the backend. This makes no sense in my eyes.

With Joomla 4 it is probably still the case.

Without extensions, like mine, the syntax highlighting is therefore not usable, because it only works in the backend or in the edit mode when the TinyMCE is loaded, because only then the needed CSS and JS are available.

avatar HLeithner
HLeithner - comment - 1 Jun 2020

But that's still a template issue isn't it? In case of tinymce the styling is done by the editor and if you display it on the website it's done by the template which is independent form the editor view.

avatar brianteeman
brianteeman - comment - 1 Jun 2020

@ahotzler I use your plugin so thanks for that.

I have never understood why tiny includes just half of the solution

avatar ReLater
ReLater - comment - 1 Jun 2020

But that's still a template issue isn't it?

A template can't decide if prism.js and prism.css is needed on a page or it's loading it too often unnecessarily (always).

You always need a frontend plugin for this, also to select a custom theme for code display and so on.

(But I don't say that it's a must for me to have it as a CORE plugin. I don't care.)

avatar ahotzler
ahotzler - comment - 1 Jun 2020

I'm thinking about it and I'm not sure. I mean no: Because the code is inserted in this particular way (using PrismJS) by the TinyMCE. In my eyes this is more a kind of library that the TinyMCE loads and that is missing in the frontend. Comparable to the libraries that Joomla! already loads. Because in the backend, this functionality is completely independent of the frontend template in the TinyMCE always available.

But you can certainly see it from different angles, because if you don't use a TinyMCE, you don't have this function.

Without the plugin I wrote (there are also other forks of it), you can't use syntax highlighting inserted with the TinyMCE anyway.

The TinyMCE offers even here only a few languages, the implementation effort would not be that high.
It becomes more difficult if users want to use more languages, for this purpose you only have to change the tag for the language in the source code view, this would be difficult if Joomla would already bring the library but limit the number of languages.

My plugin therefore offers 3 options: Only the languages provided by the TinyMCE, All Languages, and the so-called autoloader, which in my implementation only works if Joomla runs on the root (/).

Add a Comment

Login with GitHub to post a comment