CodeMirror-Talk

Summary: Talk page for CodeMirror.
Maintainer: Dfaure (helped by Simon)
Users: +4 -2 (View / Edit)

This space is for User-contributed commentary and notes. Please include your name and a date along with your comment.


You can replace CodeMirror with PmSyntax. Benefits are its built in, and searching works in the text edit area, colouration isn't quite as funky though. Recommended. simon


Is anybody using CodeMirror to edit not solely PmWiki content but also recipes? If so how? I'm considering using CodeMirror to edit local/config.php and cookbook/*.php by providing a page behind an authentication mechanism with a dropdown list and saving in place. Is anybody doing that?

Utopiah May 14, 2021, at 07:54 AM

Very nice plugin, but it seems I've hit a bug: it doesn't like Unicode characters in highlighted code. Cp. the output on these two pages:

https://www-dssz.informatik.tu-cottbus.de/DSSZ/Software/Spike

https://www-dssz.informatik.tu-cottbus.de/BME/wiki/pub/codemirror-5.45.0/mode/spike/

This is the same code, but the second one contains some Unicode characters in the comments like typographic apostrophes and long dashes, e.g.

 // if constant does not exists then it'll be created

vs.

 // if constant does not exists then it’ll be created

When I try the second one in the wiki, the code snippet doesn't show at all.

sero? April 16, 2019, at 04:34 PM

It seems that the application/x-spike language you're trying to use doesn't exist in the regular Codemirror distribution and your custom language mode isn't properly registered to be handled as expected.

In order to know which script file to use for source code rendering, the recipe needs to analyze all the language mode provided by the CodeMirror distribution. This is made by parsing both the mode/meta.js file to enumerate all the mode specifications, and for each mode found, parse the single line define([ ... ]); specification in the mode javascript file itself.

So, you should first, try to edit the mode/meta.js of your CodeMirror distribution and register here your language mode, then make sure that the define([ ... ]); specification in the mode file is written on a single line, and finally regenerate the cm-modes-dependencies.php file to have it taken in account.

Dfaure April 16, 2019, at 09:57 PM

Sorry, I probably wasn't quite clear. I've already modified mode/meta.js as you suggested, but that doesn't matter in this case. The bug shows up with standard modes, too. There's something wrong either with my PmWiki configuration or with your plugin. Here is the minimal example:

https://www-dssz.informatik.tu-cottbus.de/DSSZ/Main/WikiSandbox

This works:

(:code clike:)[@ // What's up? @]

This doesn't work:

(:code clike:)[@ // Whats up? @]

sero? April 17, 2019, at 06:59 AM

I couldn't reproduce the bug on my own UTF-8 enabled PmWiki and using only default skin.

According to what I can see using the browser's debugger on your site, it seems that the UTF-8 support isn't enabled on your installation. You should try adding:

include_once("scripts/xlpage-utf-8.php");

to your local configuration file and see if this solves the issue.

Dfaure April 17, 2019, at 08:29 AM

Thank you for pointing me in the right direction. Enabling UTF-8 support was actually not enough. It probably would work for newly created pages, but already existing pages are encoded in ISO-8859-1. I ended up patching cm-sourceblock.php like this

196c196
<     array(@$opt['class'], $id, $cm_id, $modeSpec, $opts, IsEnabled($olOffset, 'null'), htmlspecialchars($block)),
---
>     array(@$opt['class'], $id, $cm_id, $modeSpec, $opts, IsEnabled($olOffset, 'null'), PHSC($block)),

See the explanation at Troubleshooting#blank_sections

sero? April 17, 2019, at 11:02 AM

Nice to see you solved your issue. Your patch has been integrated into the last release and a door has been open to handling of custom language modes without requiring to modify the mode/meta.js file.

Dfaure April 17, 2019, at 12:37 PM

Thank you for plugin. I've successfully installed it on our wiki (version 2018-02-05). Few comments:

  • We use whitespace rules for lists. Lower levels were not highlighted. I changed pmwiki.js:
    • {regex: /\s*[*]+/, sol: true, token: "pm-plist"},
      {regex: /\s*[#]+/, sol: true, token: "pm-nlist"},
    • Unfortunately I am not programmer, so I was not able to change automatic continuation for whitespaced lists. It's in cmcontinuelist.js. Any ideas?
  • Sometimes we use more than four dashed for horizontal line. It highlighted only four dashes and rest was on another line. I changed it to:
    • {regex: /----+/, sol: true, token: "pm-hr"},

MH? April 08, 2019, at 03:05 PM

Well done :) The recipe has been fixed accordingly and the continuelist is now able to catch the leading spaces when repeating the list item, but I don't see any simple mean to know when I should skip from a list item line to a whitespace prefixed line. BTW, I'll look into providing some kind of autoindentation but can't give any date for that.
Dfaure April 13, 2019, at 04:10 PM

A brilliant plugin. Now, if only I can get vim mode working. This Codemirror page refers: Vim demo. I have not yet viewed this plugin code, but is possible that Vim support might require higher level changes than on a parameters level as attempted below, refer to https://stackoverflow.com/questions/15152675/using-codemirror-in-vim-mode#15184747

Using Codemirror-5.34.0, I have tried adding each of the following options respectively in /local/config.php before the include_once line to load CodeMirror. In each case CodeMirror does work, but vim mode is not enabled though.

  • $CodeMirrorActivePreset['keyMap'] = 'vim';
  • $CodeMirrorPresets['keyMap'] = "vim";
  • $CodeMirrorPresetParams['keyMap'] = 'vim';
  • $CodeMirrorConfig['keyMap'] = "vim";

Any help will be appreciated, thanks. casperl February 05, 2018, at 03:56 AM

Thanks for the comment. In fact, I didn't enable any editor's custom keymap (and related scripts) in the previous recipe version. This has been fixed for now and you could enable it with:
$CodeMirrorActivePresets['vim'] = 1;
Dfaure February 06, 2018, at 05:07 AM

To increase the height of the editing area add the line

.CodeMirror { height: 30em; } /* added */

to pub/css/local.css

To change the font size in the editing area add the line

.CodeMirror { font-size: 0.95em; } /* added */

to pub/css/local.css


Recipes like EditPosFix or RememberEditPosition do not work after installing this receipe. Some function of that kind would be great, allthough. Is there anyone, who can implement this? svasta, 2016-11-30

The feature is available in latest release.
Dfaure March 22, 2017, at 09:43 AM
Works fine! Thank you very much!!! These "little" things are saving so much time... svasta, 2017-04-11

GuiEditResize recipe does not work when this recipe is enabled

simon March 28, 2015, at 10:17 PM

I've had a coworker complain about losing spell checking when this awesome editor is installed. I've attempted to shoe horn in a couple of the suggested fixes (html span assignment or outside javascript) from CM's github discussions but haven't had any luck. Any advice ?

unfy Aug 4, 2015
You may use the highlight/regular editing checkbox feature in the icons bar to get back to the standard editor which handle spell checking.
Dfaure May 26, 2016, at 02:38 AM

Any trick to make it work nicely on mobile? Utopiah June 20, 2016, at 10:10 AM

For CodeMirror itself, you may refer to: http://codemirror.net/#browsersupport. For the PmWiki side, this should rely on a mobile-compatible skin.
Dfaure August 09, 2016, at 04:41 AM

How do I change the theme? I know I'm probably missing something simple, but I'm not at a loss. -Monte, 2017-08-18

  • I tried replacing pmwiki.css with night.css, but it didn't work. Do I need to update the pmwiki.css file, since it has cm-pm-* -vs- cm-s-* tagging? -Monte, 2017-08-18
Sorry but themes haven't been handled for now. May be in a future version...
Dfaure August 18, 2017, at 02:10 PM

Talk page for the CodeMirror recipe (users).