Greasy Fork is available in English.
Splits the Theming editor into multiple named fields for easier management and adds syntax highlighting
This script introduces multiple changes to the campaign Theming editors in Kanka. The cornerstone feature is that you can click a button to split your CSS into multiple form fields. Those fields are collapsed by default to help you quickly find the section you need, they can be renamed and reordered easily and they provide syntax highlighting using a customizable theme.
It's still early in this script's life and you might lose changes, though it has proven reliable so far. Since Kanka 1.16, accidentally submitting the form while your CSS is split should no longer be possible through conventional means, so you should be safe from user errors =)
Just click the Split CSS sections button under the default CSS field to activate syntax highlighting, and split your code into multiple fields if you already have section delimiters in place. If not, you can use the Create new section button below the editor to add more sections. When you're done editing, you will need to click the Merge CSS sections button before saving.
Each code block is hidden in a details HTML element and collapsed by default. Depending on your browser, there should be an arrow or some other icon near each title to expand and collapse each section.
Each section name is an input field that you can edit. Of course, changes to titles in the full (flat) CSS will also be reflected when splitting again.
After each section name, an icon (arrows pointing to the four cardinal directions) can be clicked and dragged to move the section to another position. When you merge the sections, the flat CSS field will reflect this new order.
The script looks for the following syntax for section titles: /*† Title †*/. Any such comments already in your code will be handled seamlessly.
You can find instructions at the top of the script on how to choose and change the editor's theme in your copy of the script. You can also add your own CSS rules to the .CodeMirror element in your campaign CSS or in your copy of the script. Just remember to reapply your changes when updating the script, as there will certainly be updates at this stage.
This script relies on CodeMirror for the syntax highlighting, automatic indentation and related features. I've kept the editor close to default settings for now, but feel free to get in touch to request additional CM options and features be added to the script by default or via configuration options.
