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.

tags like LI should have UL tags and Table rows need TABLE tags.

A count down State machine can be used to do this.

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.

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)