search

moodle-an-hochschulen / moodle-theme_boost_union

Theme Boost Union is an enhanced child theme of Boost which is intended, on the one hand, to make Boost simply more configurable and, on the other hand, to provide helpful additional features for the daily Moodle operation of admins, teachers and students.
GNU General Public License v3.0
61 stars 54 forks source link

Syntax highlighting inside text fields purposed for code, e.g., Raw SCSS #460

Open DmitrySharabin opened 10 months ago

DmitrySharabin commented 10 months ago

Customizing sites' styles, I noticed that in most cases, when I need to perform some minor changes, I edit SCSS directly in the Raw SCSS text field. I'm so used to the benefits of working with code in code editors that I started expecting something like this from Moodle. 😅 Luckily, thanks to text editors built into Moodle, we can get all we need. For example, the HTML/code view of the built-in Atto editor provides excellent DX; it not only highlights the syntax but also traps the Tab key so that we can indent code with tabs right inside the editor.

It would be lovely to get something like Atto's HTML/code view instead of plain HTML text fields when working with code inside the Boost Union theme.

SCR-20231107-htrv

P.S. It looks like we will see the end of Atto in Moodle, but we still can benefit from its good parts. 😊

lucaboesch commented 10 months ago

That doesn't sound like a sustainable proposal @DmitrySharabin . Atto editor is going to be retired soon. Boost Union should not rely on it, IMHO.

Best, Luca

DmitrySharabin commented 10 months ago

Hey @lucaboesch,

Thanks for the quick response. I might not have been precise in my words. I propose to add some bare minimum to the text fields, which are supposed to work with raw code. I don't suggest using Atto for this. It was an example illustrating that it's not something new in Moodle.

Regards, Dmitry

lucaboesch commented 10 months ago

So, just formatting the text field content in monospace would already be enough? That wouldn't have any color highlighting but might look more into what you are desiring though.

DmitrySharabin commented 10 months ago

So, just formatting the text field content in monospace would already be enough? That wouldn't have any color highlighting but might look more into what you are desiring though.

I don’t think that would be enough. The main issue with these fields is bad UX, not how they look. There are no clues that might help spot code bugs in the early stages. When we highlight different parts of CSS rules with different colors, we help people read and understand the code and be more proficient while working with it.

Something like Prism might help.

lucaboesch commented 10 months ago

Ah, I see, that is reasonable. And fortunately enough, Prism is already (starting in version 4.3) delivered with Moodle core, see https://github.com/moodle/moodle/tree/master/filter/codehighlighter/amd/src

DmitrySharabin commented 10 months ago

Yay! 🎉 That gives me hope. 😉