side-by-side.html

# what i meant by "simple"

## table of contents

<a href=#what_i_meant_by_simple> what i meant by "simple" </a>  
<a href=#table_of_contents> table of contents </a>  
<a href=#about_the_message_i_posted> about the message i posted </a>  
<a href=#what_gerald_said> what gerald said </a>  
<a href=#what_john_said> what john said </a>  
<a href=#what_i_mean_by_simple> what i mean by "simple" </a>  
<a href=#my_general_responses> my general responses </a>  
<a href=#my_code_was_also_less_than_perfect> my code was also less than perfect </a>  
<a href=#and_now_no_framework_required> and now no framework required </a>  
<a href=#what_this_code_facilitates> what this code facilitates </a>  
<a href=#on_the_matter_of_doing_sync> on the matter of doing sync </a>  
<a href=#determining_the_line_the_cursor_is_on> determining the line the cursor is on </a>

## about the message i posted

first let's look at what people said about my post.

### what gerald said

gerald said:

> I published a simple single static HTML page
> side-by-side markdown editor about a year ago.

> http://geraldb.github.io/markdown-note/note.html

### what john said

john said:

> the dingus I linked to before
> has side-by-side editing

> http://jgm.github.io/stmd/js

## what i mean by "simple"

i realize that i neglected to mention my operationalization for
the word "simple" in the context of that sample code i posted.

my goal was to demonstrate that an .html file -- by itself --
is sufficient. the absence of any "framework" is thus crucial.
most people prefer to use the framework of _their_ choice.

***

### my general responses

gerald, your code will be "simple" in a ruby-on-rails setting.
but anyone who doesn't know ruby-on-rails is gonna be lost.

and john, your dingus has a lot of bootstrap dependencies.

***

### my code was also less than perfect

of course, as i noted, the code i posted required jquery, so
it wasn't completely "pure" in terms of my now-stated goal.

so, as an exercise, i reworked the example just a little bit:

> http://zenmagiclove.com/misc/sssss/side-by-side-v2.html

### and now no framework required

you can verify this new code requires no framework at all.

i eliminated the jquery by converting to "vanilla" javascript.
in a "real" editor, there are enough wrinkles that jquery is
more-or-less a requirement anyway, but this is an exercise.

i also hand-coded a very crude conversion routine, so that
there is no need to call a converter from the internet either.
the conversion routine is embedded right there in the page.

### what this code facilitates

this allows a person to download the light-markup text itself,
and have it converted to .html _client-side_ for display there.

it also allows the .html file to be used in an "offline" context,
provided that you grok the resultant complications of "saving".

but the cool thing is client-side conversion of the light-markup.

in this sense, similar rad stuff has been done by "strapdown":

> http://strapdownjs.com

for the strapdown version of this message, see here:

> http://zenmagiclove.com/misc/sssss/strapdown-v2.html

***

## on the matter of doing sync

john said:

> It should be possible to add some degree of syncing,
> since the stmd parser includes source position information
> in the syntax tree, and this could (with some changes
> to the HTML writer) be included in the HTML output

one could enable syncing in that way, most definitely.

i do it another way, but whatever works is worthwhile.

### determining the line the cursor is on

john said:

> I never did figure out how to determine using js
> which line of the input source the cursor is on,
> but presumably this is possible.

1. get location of the editfield cursor.  
1. get copy of text up to the location.  
1. put the copy in a dummy textarea.  
1. use dummy height to compute line.

-bowerbird