SimpleMarkdown

simple markdown

It would be nice if I could use a simple markdown or wiki for writing notes.

I have a web page for displaying pictures.

http://www.dougrice.plus.com/images/indexImages.htm

What I want is a page that takes a directory listing of a folder with loads of images and writes HTML to display them.

Could I put the directory listing between <div id=gifs ></div>?

Could I write a function to read the data from the web page and use inner HTML to write HTML?

Yes! it turns out to be easy.

Use dir /b > op.txt to get list of files and edit op.txt

Use dir /b

<div id="gifs">
imgWiki_a_001.jpg
imgWiki_a_002.jpg
imgWiki_a_003.jpg
<div>

 <script>

 /*
 *  get list of image file names generated with dir /b > op.txt
 *  from <div id="gifs"> ... <div>
 *  and insert back into <div id="gifs"> ... <div>
 */

 function showImages(){
  if (document.getElementById){
      gifs = document.getElementById( "gifs" ).innerHTML

	  /* split the list into an array, the join with <img src=X > | */
      gifsA = gifs.split("\n")
	  // add a dummy image 
      var opStr = ("<br>"+gifsA.join("> <HR> <img src=./")+"img_b9.png >")

      document.getElementById( "gifs" ).innerHTML=opStr
  }
 }
 showImages()
 </script>

 
 

Simple Markdown

Using my own syntax it is quite easy to write simple web pages in a wiki style.

http://www.dougrice.plus.com/hp/news/dashBoard.htm

<div id="md">
example Markdown
= Title
== Subtitile
text
  fixedtext
* list
If the line starts with HTTP its a link.
  fixed text
http://www.dougrice.plus.com/gbbook/calendar/bookingDemo.htm
http://www.dougrice.plus.com/images/imgWiki_AC1070.jpg
imgWiki_AC1070.jpg
== table using csv
,item,status,severity,title,comment
,1,2,3,4,5
,a,b,c,d,e

== table using tabs - after copy and paste from excel
,item,status,severity,title,comment
,1	2	3	4	5
,a	b	c	d	e

== Spot The lighthouse trip
http://www.dougrice.plus.com/images/imgWiki_a_009.jpg
we had a nice day when we went to see the light house up the coast.
 dir /b /images/* > op.txt

== Flat horizon crop
http://www.dougrice.plus.com/images/imgWiki_AC1009.jpg

I have a lot of images with a thin horizon and I cropped out just the horizon 
http://www.dougrice.plus.com/images/imgWiki_AC1022.jpg
<div>

<script>
showMarkdown( "md", "md")
</script>

I have tried to get it to do tables, but it is getting complicated.

do view source on my page for the JavaScript function. It seems to work.

Using JavaScript

I use showMarkdown() to go line by line through the text block.

If it finds a markdown tag it wraps the found text in the HTML.

Simple rules like headers , links and URLS to pictures, one per line make it simple.

Lists and Tables are more complicated. You have to wrap a list with UL tags and Tables with TABLE.

A count down State machine can be used to do this. These are set to a state and each line count down to zero.

Each time an LI tag is found, the state is set to 2

At the end of the tag search, check if the state is 1, and decrement the state down to 0.

If it is 1 wrap UL or TABLE tags around the HTML for the list of table.

Using TAG

 * means Bullet

 , means CSV table

When you see a * or , at the start, set wrapperTag to UL or Table

You need to agregate lines of rows of a table and then wrap TABLE tags around it if the next line is not a row.

Like for lists, agregate lines for bullet lists and wrap UL tags if another bullet point is not found.

Each time you see a table row, set wrapperTag to TABLE ,

If the next line is not a row, wrap agregated rows with TABLE tags.

If the Markdown line is not a row split it and wrap each cell. And wrap the row with TR tags

If you find a row set wrapperTag to TABLE excluding the >.

If the wrapperTag does not have > agregate, and add > to wrapperTag

If tag has > after all options looked at, its time to wrap.

Could you use a Shift Register State machine ?

when you find a LI or table row set a variable with the tag

 tag2 = "UL"
 tag1 = ""

 if ( tag1.length > 0 ){
   // wrap html with UL and /UL tags or TABLE and /TABLE tags.
 }  

 tag1 = tag2
 tag2 = ""

Another way would be to have just Tag and use the first two characters, like the start bit in RS232

 tag = "-_UL"

 tag = "-_table"

 if ( tag.substr(1,0) == "_" ){
   // 
 }
 tag = tag.substr(1)

Append >

Append a > on the end of the tag.

If you see > on the end of the wapperTag, its time to wrap the agregates lines in the tag.