INTRO: CodeMirror2 plugins for TiddlyWiki and TiddlySpace

[PMario]

Hi folks,

I have created a new space [1] to document the codemirror-plugins
[1.1]. If you want to test the plugins yourself, include the
"codemirror-plugins" space into your space.

The CodeMirror library [2] adds "real time" syntax highlighting to the
TW editor. It can also be used to do "syntax highlighting only" in
view mode.

The whole stuff is "beta" at the moment.

The space [1.1] can handle:
* html
* xml
* css
* javascript
* python

You have to add the "cmEdit" "cmSave" commands into your
ToolbarCommands [5] tiddler.
At the moment, the commands don't have there own icons. You can copy
editTiddler and saveTiddler icons to cmEdit and cmSave.

To get more detailed info read the "HelloWorld" and the
"CodeMirror2PluginInfo" tiddler at the space [1].

TWdev posts: [3] beta intro, [4] alpha intro

have fun!
mario

PS: Feedback is very welcome.

[1] http://codemirror.tiddlyspace.com
[1.1] http://codemirror-plugins.tiddlyspace.com
[2] http://codemirror.net/
[3] http://groups.google.com/group/tiddlywikidev/browse_thread/thread/c12c4568e13bad70?hl=en
[4] http://groups.google.com/group/tiddlywikidev/browse_thread/thread/1a85d5fb07ac717?hl=en
[5] http://codemirror.tiddlyspace.com/#ToolbarCommands

[PMario]

Pushed tiddlywiki.js and tiddlywiki.css to codemirror-plugins space.
-m

[PMario]

The codemirror-plugin space can handle:
* html, xml, css, javascript, python
and
* TiddlyWiki syntax (edit and view mode)

TW syntax is set to default now.

It can be seen at:
http://pmario.tiddlyspace.com/#TestTWHighlightingEditor%20TestTWCodeBlock

have fun!
-m

[PMario]

Hi folks,
TiddlyWiki syntax highlighting (edit and view mode) is part of
codemirror now.

have fun!
mario

[1] http://codemirror.net/mode/tiddlywiki/index.html
[2] http://codemirror.net/

[Yakov]

Hi Mario!

Today I felt like I need to organize some code examples and pack those
which I looked in the Notepad++ into a TiddlyWiki, so I decided that
it's the time try the codemirror plugin in practice.

Along with the excitement because of the great tw-syntax highlightning
idea (and implementation) I've run right into a bit of hindrance. The
obstacle is the mess in the main [1] space.

First things first, despite the fact that everyone who got there from
this thread knows the context. Let's consider the [1]'s HelloWorld
tiddler ("main page", sort of say). Honestly, the first words I expect
in such a repository/site is something like "this TiddlyWiki contains
the CodeMirrorPlugin which allows to highlight the syntax of some
programming languages, including HTML, CSS, JavaScript and others
using codemirror [a link to the site]". Also, "codemirror a
TiddlySpace" is rather vague title of the space. Seriously, you should
present such a great work in a better way.

I'll add some details. So, what next? After a brief description of the
space (and the plugin) one would expect some feature highlightnings, a
couple of words about how it works and some links to the examples you
already have (and mentioning of the TiddlyWiki group). Then, there
should be installation guidelines (the howto, as brief as possible,
and the mentioning that it is beta [which can be mentioned before as
well] and supposed consequences, if any) and only then installation
details (like "Important for TiddlySpace"). And then the configuration
part ("Once the plugin is installed..").

Some words about the names. First, it's unclear why all the names
contain "CodeMirror2". Ok, the codemirror library has version 2, but
it's quite strange to include this in all the names and even skip
mentioning the reason. Afterall, I'd recomend to skip the "2". The
same thing with "zCodeMirror2Plugin". Why "z"? Why the name of the
info tiddler =/= the name of the plugin + "Info"? I think, more
simplicity is missing. Also, having the name of a plugin as wikiword
is usually useful.

Now, the practical part: the installation. Honestly, for the first
time, seeing all the disordered notes in different tiddlers I thought
I will have hard times installing and configuring the plugin. This is
why I usually install new big plugins in a separate "repository" first
and most of the times edit the description. So,
1. I copied the zCodeMirror2Plugin and CodeMirror2PluginInfo tiddlers
and added the systemConfig tag to the first one. I must notice, I
expect that the installation guidelines are in CodeMirror2PluginInfo
also (not only the Usage section). Also, I deleted links to the MIMEs
and TWGroup tiddlers (there's not much sense in them since they
contains just links, and also the MIME link leads to the German wiki,
which is rather inconvenient).
2. I saw the "required" slice in the zCodeMirror2Plugin which is good,
but "codemirror.js" is not a link which forces a user to search more.
I searched [1] for codemirror.js, found it, copied and added the
"systemConfig" tag.
3. I also noticed among the notes a mention of CMEditCommands, which
is not mentioned in the "main" plugin tiddler as well as in the "Info"
tiddler. It seems that it should be in the latter. I added
CMEditCommands with "systemConfig" and cmEdit command to the
ToolbarCommands. Yeah, I know, I've seen the cmSave command, but let
me behave not clever to illustrate some problems with documentation.
4. Ok, I reloaded. An error occured while evaluating
zCodeMirror2Plugin. "ReferenceError: Undefined variable: CodeMirror".
Ouch. If it is undefined, than perhaps another tiddler is missing.
Searching [1] for "CodeMirror" is pain, you can guess ;) When I
clicked the zCodeMirror2Plugin in the plugin manager, I got
"TypeError: 'CodeMirror.runMode' is not a function" JavaScript
message. Right, this gets me closer to the problem. There's a
[[runmode.js]] tiddler, let's copy it. Reloading.. again an error,
plugin manager sais the same.
5. But what I really don't understand is this: I set a breaking point
in the beginning of the zCodeMirror2Plugin (if there's an error, let's
see it there), but I see the TW loading and showing the error message
and the plugin manager opened despite the fact that zCodeMirror2Plugin
code shouldn't even be evaluated..

Ok, that's it for the first time. Hope this helps and wait for some
help with installation. Really, this thing would be useful even in
Eric's "insideTW" [2], but it should get more user friendly first :)

[1] http://codemirror.tiddlyspace.com/
[2] http://www.tiddlytools.com/insideTW/