Syntax Highlighting when editing Themes and Components

[Eugene]

@Eugene: the plugin does not work with the page editor, even if the CKEditor is switched off.

It's very bad =(
Do you plan to add this functionality?

[sal]

Would love a dark theme option, I had a quick go at jamming in Monokai and failed. Either a toggle like the demo, a setting under plugins or even a quick run through on changing it manually would be great.

[mvlcek]

Would love a dark theme option, I had a quick go at jamming in Monokai and failed. Either a toggle like the demo, a setting under plugins or even a quick run through on changing it manually would be great.

Just replace the content of default.css with the styles of your preference.
If you use one of the CodeMirror themes, make sure to replace .cm-s-xxx with .cm-s-default and add the following additional lines for PHP/GetSimple functions (with your colors):

Code:

.cm-s-default span.cm-function {color: #219;}
.cm-s-default span.cm-function-2 {color: #219; font-weight:bold;}
.cm-s-default span.cm-function-3 {color: #219; font-weight:bold;}

[shawn_a]

aaaaah aaaaaaaaah aaaaahhhh aahhhh ahhhh
( thats holy singing )

behold!
( stick this in your custom admin css plugin )

Code:

.CodeMirror-scroll {
  height: auto;
  overflow-y: hidden;
  overflow-x: auto;
  width: 100%
}

http://codemirror.net/demo/resize.html


And real time themeing is neat also.
http://codemirror.net/demo/theme.html

[shawn_a]

can you add the custom admin css plugin editor ?

load.php?id=custom-admin-css

[mvlcek]

Theme Highlighter version 1.1:

• supports the Custom Admin CSS plugin (@shawn_a)
  
• includes a dark theme - just replace /plugins/theme_highlighter/css/default.css with dark.css (@sal)
  
• fixes some small display bugs
  

[shawn_a]

Just updated to latest version, not sure what i was on before, but now my editors are all messed up.
There is a solid black line above and below the editor, and the scroll bars and sizes are all wierd, I cannot scroll all the way to the end of some long lines. And in theme editor, the save button has no padding its right up against the editor textarea.

What changed ?

GS 3.1

[mvlcek]

Just updated to latest version, not sure what i was on before, but now my editors are all messed up.
There is a solid black line above and below the editor, and the scroll bars and sizes are all wierd, I cannot scroll all the way to the end of some long lines. And in theme editor, the save button has no padding its right up against the editor textarea.

What changed ?

GS 3.1

I do not have the display problems with FF, Chrome and Opera (Safari and IE don't run on Linux, so I can't test) and GS 3.1.

However, for really long times it's sometimes not possible to scroll to the end - I didn't find a fix for it - just make a line break. In the previous version a scroll bar would show up for this line, which would mess up the line numbers/line selection.

[shawn_a]

ok that was being caused by another plugin adding its own codemirror stylesheets all the time.

I just updated to a clean install of 3.1.2 with the latest plugin version, no other plugins.

The theme is now monospace font and gray background.
Do we have to explicitly load our own themes now ? Is this the new default ?

looks pretty aweful, I think it was courier-new and white background before. You might want to check it out when you get a chance.

ughh , actually nevermind, someone removed the damn wrapper on that page in core.
arghhhhh

[dikkewalter]

this plugin is awesome!

Now if someone was to make this happen so that by activating another plugin like "syntax higlighter for pages" the exact same cosmetic change would be applied when editting pages in the "source".

This is so needed because the current editor in "source" mode is just horrible to work with.

I know there is a wiki tutorial on it: http://get-simple.info/wiki/how_to:editor_configuration_syntaxhighlight
but it is too difficult to use for me.

[shawn_a]

It is possible this will be implemented for v3.3

[dikkewalter]

It is possible this will be implemented for v3.3

hooray! I already thank you in advance for this awesome feature to come.

[datiswous]

Hello, when I have the SA GS Admin Toolbar installed and go in full screen mode editing a template the top of the template is not visible because it is hidden behind the toolbar.

I also posted this in the thread for that plugin.

[vginer]

@Eugene: the plugin does not work with the page editor, even if the CKEditor is switched off.

Is this finally going to happen, I mean, is this great plugin going to be extended to work also on the HTML view of pages??

I must say "thank you" to those great developers in GS. I am new to this CMS, but I am finding it quite easy to get along with it thanks to the easy-to-use plugins and solutions.

[Timbow]

I like to use this plugin but I am experiencing some slight difficulty.

Underscores are not displaying. Functionality is not impaired, they show up when the plugin is deactivated, but it is confusing.
   

[shawn_a]

Increase line height perhaps?

[Timbow]

Exactly that, thanks. there is a line-height declaration in the plugin css.

[lnickel]

How to get word wrap in the theme highlighter? Its not working for me. I'm on a mac using Firefox 35.0

[shawn_a]

// lineWrapping : true,
in the editor config

PHP Code:

footer.php
   var editor = CodeMirror.fromTextArea(textarea, { 


you might also be able to do it in your own js code after codemirror is initialized of course

Code:

// psuedo code
myeditor = $('#codetext').next('.CodeMirror').get(0).CodeMirror;
myeditor.setOption('lineWrapping',true);    
myeditor.refresh();

i tried this in 3.4 and it works, for example
$(".code_edit").next(".CodeMirror").get(0).CodeMirror.setOption('lineWrapping',true)

of course for components you have to wrap this in a .each since there will be mutiple matches etc.

[lnickel]

Thanks Sean I opened up the footer.php file located in the plugin and added that lineWrapping: true. There were two instances of that. I flushed the caches but still there is no wrapping. I'll try the js next.

Thank you!!

[shawn_a]

it might be a different config, maybe wrap:true, not sure which version of codemirror this plugin uses but its probably older.

actually i do not think codemirror 2 supports line wrapping

[Shasaar]

Exactly that, thanks. there is a line-height declaration in the plugin css.

Hello Timbow,

could you please let me know what you changed exactly?
I'v got the same problem with the plugin, underscores are hidden.
Changing the line-height in the codemirror.css didn't do the trick.

Thank you in advance.
Kind regards.
Shasaar

Edit: changing the line-height works, one has to clear the cache of the browser before it takes effect.