Realtime syntax highlighting using CodeMirror - beta
18 views
Skip to first unread message
PMario
Sep 7, 2011, 9:12:21 PM9/7/11
to TiddlyWikiDev
Hi folks,
I implemented most features, I wanted to have:
ViewMode - TW syntax with code blocks render like this:
{{{ ... }}} .. text/plain
/*{{{*/ ... /*}}}*/ ... CSS
...
Full description can be found at CodeMirror2PluginInfo [2] tiddler
====
Tiddler tags, the fields "content-type" and "server.content-type" are
responsible for "edit mode"
Tags that influence the edit mode are configured at CodeMirror2Config
[3] tiddler
This config tiddler also contains the global editor settings eg:
lineNumbers, indentMode ... Every parameter can be overwritten, if
defined again with a mode. The settings have to be valid TW slices!
====
field: content-type is used to define an edit mode, if no "special
tag" is active.
field: server.content-type is used if _no tag_ and _no content-type_
field is active.
Both of them are usefull. eg:
* server.content-type: image/svg+xml
* content-type: application/xml
This will render a svg as a picture in TiddlySpace and edit it as xml
text.
In edit mode the "content-type" field can be changed, using the
"content-type" button near the toolbar commands. If you use "-none-"
it will be initialized with an empty string.
other fields can be changed with "more: fields" command using
FieldsEditorPlugin
===
If content-type is eg: "text/css" and there is no {{{ found in the
tiddler text, then the tiddler will be rendered with a <pre> block,
using the css syntax highlighting. This will come in handy, used with
TiddlySpace and "server.content-type" .. It can be used for view and
edit mode, to hack SPAs :)
have fun!
hope to get some more feedback this time :)
-mario
Next: What do you think about a TW markup highlighter?
[1] http://dl.dropbox.com/u/28489257/upstream.html
[2] http://dl.dropbox.com/u/28489257/upstream.html#CodeMirror2PluginInfo
[3] http://dl.dropbox.com/u/28489257/upstream.html#CodeMirror2Config
I implemented most features, I wanted to have:
ViewMode - TW syntax with code blocks render like this:
{{{ ... }}} .. text/plain
/*{{{*/ ... /*}}}*/ ... CSS
...
Full description can be found at CodeMirror2PluginInfo [2] tiddler
====
Tiddler tags, the fields "content-type" and "server.content-type" are
responsible for "edit mode"
Tags that influence the edit mode are configured at CodeMirror2Config
[3] tiddler
This config tiddler also contains the global editor settings eg:
lineNumbers, indentMode ... Every parameter can be overwritten, if
defined again with a mode. The settings have to be valid TW slices!
====
field: content-type is used to define an edit mode, if no "special
tag" is active.
field: server.content-type is used if _no tag_ and _no content-type_
field is active.
Both of them are usefull. eg:
* server.content-type: image/svg+xml
* content-type: application/xml
This will render a svg as a picture in TiddlySpace and edit it as xml
text.
In edit mode the "content-type" field can be changed, using the
"content-type" button near the toolbar commands. If you use "-none-"
it will be initialized with an empty string.
other fields can be changed with "more: fields" command using
FieldsEditorPlugin
===
If content-type is eg: "text/css" and there is no {{{ found in the
tiddler text, then the tiddler will be rendered with a <pre> block,
using the css syntax highlighting. This will come in handy, used with
TiddlySpace and "server.content-type" .. It can be used for view and
edit mode, to hack SPAs :)
have fun!
hope to get some more feedback this time :)
-mario
Next: What do you think about a TW markup highlighter?
[1] http://dl.dropbox.com/u/28489257/upstream.html
[2] http://dl.dropbox.com/u/28489257/upstream.html#CodeMirror2PluginInfo
[3] http://dl.dropbox.com/u/28489257/upstream.html#CodeMirror2Config
Yakov
Sep 12, 2011, 2:43:06 PM9/12/11
to TiddlyWikiDev
First, congratulations for the next step.
Second, an avalanche small notes:
* in the CodeMirror2PluginInfo there's a typo: "Supported MIMEs:
{{{<<cmMIMIEs>>}}} <<cmMIMEs>>". There's an extra "I".
* esc for exit edit mode and ctrl+enter for save and exit don't work
(through HTTP, with Opera)
* in advanced options: I think "Guess syntax: <<option
chkGuessSyntax>> -- If activated" would look clearer than "Guess
syntax: <<option chkGuessSyntax>> .. If activated"
* a dialog "Are you sure you want to abandon your changes to
'CodeMirror2PluginInfo'?" appears even if no changes were applied and
then "cancel" was pushed
* you can avoid making the space in "< <list filter [tag[syntax]]>>"
in ToDo section: just wrap it with <html>...</html> and use html-
entities. Although, this looks bulky. And actually I don't understand
what this section is about.
* auto-indent is cool :)
* I feel like the first 4 global parameters need some better
description
* CodeMirror Info seems to belong to CodeMirror2PluginInfo (except the
last item)
* the content-type button is catchy; but ideally it should be define
for the toolbar (and hense one can even put this option into the
"more" part of the ViewToolbar slice). This seem to be also better
because you don't have to change the EditTemplate which is evil
actually.
I think, I'll stop at this point, there's already enough to discuss/
work on.
Second, an avalanche small notes:
* in the CodeMirror2PluginInfo there's a typo: "Supported MIMEs:
{{{<<cmMIMIEs>>}}} <<cmMIMEs>>". There's an extra "I".
* esc for exit edit mode and ctrl+enter for save and exit don't work
(through HTTP, with Opera)
* in advanced options: I think "Guess syntax: <<option
chkGuessSyntax>> -- If activated" would look clearer than "Guess
syntax: <<option chkGuessSyntax>> .. If activated"
* a dialog "Are you sure you want to abandon your changes to
'CodeMirror2PluginInfo'?" appears even if no changes were applied and
then "cancel" was pushed
* you can avoid making the space in "< <list filter [tag[syntax]]>>"
in ToDo section: just wrap it with <html>...</html> and use html-
entities. Although, this looks bulky. And actually I don't understand
what this section is about.
* auto-indent is cool :)
* I feel like the first 4 global parameters need some better
description
* CodeMirror Info seems to belong to CodeMirror2PluginInfo (except the
last item)
* the content-type button is catchy; but ideally it should be define
for the toolbar (and hense one can even put this option into the
"more" part of the ViewToolbar slice). This seem to be also better
because you don't have to change the EditTemplate which is evil
actually.
I think, I'll stop at this point, there's already enough to discuss/
work on.
PMario
Sep 12, 2011, 3:30:03 PM9/12/11
to TiddlyWikiDev
On Sep 12, 8:43 pm, Yakov <yakov.litvin.publi...@gmail.com> wrote:
> Second, an avalanche small notes:
> * in the CodeMirror2PluginInfo there's a typo: "Supported MIMEs:
> {{{<<cmMIMIEs>>}}} <<cmMIMEs>>". There's an extra "I".
will fix this
> Second, an avalanche small notes:
> * in the CodeMirror2PluginInfo there's a typo: "Supported MIMEs:
> {{{<<cmMIMIEs>>}}} <<cmMIMEs>>". There's an extra "I".
> * esc for exit edit mode and ctrl+enter for save and exit don't work
> (through HTTP, with Opera)
Just use: +cmSave and -cancelTiddler .. see + and -
It should work then.
> * in advanced options: I think "Guess syntax: <<option
> chkGuessSyntax>> -- If activated" would look clearer than "Guess
> syntax: <<option chkGuessSyntax>> .. If activated"
> * a dialog "Are you sure you want to abandon your changes to
> 'CodeMirror2PluginInfo'?" appears even if no changes were applied and
> then "cancel" was pushed
"hidden background editor" as "dirty". Which isn't true, I know :) I
would have to create some sha fingerprint and compare ... , which
needs some more code. :))
> * you can avoid making the space in "< <list filter [tag[syntax]]>>"
the moment, I don't want to have that tag assigned :) It should create
a list of all tiddlers, you need to import if you want to include the
editor into your own TW. Since it's not for production, it's hidden :)
> in ToDo section: just wrap it with <html>...</html> and use html-
> entities. Although, this looks bulky. And actually I don't understand
> what this section is about.
> * auto-indent is cool :)
> * I feel like the first 4 global parameters need some better
> description
duplicate it.
> * CodeMirror Info seems to belong to CodeMirror2PluginInfo (except the
> last item)
> * the content-type button is catchy; but ideally it should be define
> for the toolbar (and hense one can even put this option into the
> "more" part of the ViewToolbar slice). This seem to be also better
> because you don't have to change the EditTemplate which is evil
> actually.
Toolbar commands, are not able to take configuration parameters. (see
ToolbarCommands)
The config-type button is a macro, that can be called in edit mode
_only_. EditTemplate, to be exact.
Actually I'd need 2 Toolbar buttons, to access "content-type" and
"server.content-type", which is not exposed at the moment. Will be
needed if used with TiddlySpace.
It would be possible, to create an edit template, that integrates the
button into the toolbar. But it won't be compatible with TiddlySpace
toolbar icon handling. That's why it got a different position.
> I think, I'll stop at this point, there's already enough to discuss/
> work on.
-m
Reply all
Reply to author
Forward
0 new messages