Dashboard and updateable Markdown Experiment

There is a need for a web page that can be updated simply. A page could have a few updateable fixed blocks and possibly a block where a simple "markdown" can be used.

Using Guestbook idea to update one of the blocks below:-

Experiment with updateable blocks of text.

block1
monospaced text:
block2
block3

Updateable markdown test

block4
block4md

block5
block5md

block6
block6md

Dashboard Update form to update one of the blocks above

Use the form below to update one of the blocks above.

Your Name: Your email:

Title:

Please enter text updates:-

preview of HTML

Select Block to update:

It is possible to modify and append some css style:

Markdown Preview

blockPreview
blockPreviewMD
blockPreviewMDop

latest News Update form

Update Latest News on http://www.dougrice.plus.com/btinternet/ using this form:-

Your Name

Your email:

Title:

Please enter any comments:-

Code for Markdown experiment

Here is the fuction that converts markdown text to HTML


/*
*
* The function below is used to build up booking
*
*/  

function showMarkdown( div_ip, div_op  ){
  if (document.getElementById){
      md = document.getElementById( div_ip ).innerHTML
     // alert( md )
     // The Markdown text is at the top of the page
     // Blank it when read.
	 
	 document.getElementById( div_ip ).innerHTML =""

	  /* split the list into an array, the join with <img src=X > | */
      //mdA = md.split("\n")
	  // split on end of line. 
	  // guestbook comment has \n converted to <BR> 
      mdA = md.split(/<P>|<BR>|\n/gi )
      //alert( mdA.join("\n") )
	  
      // parse for a markdown 
	  for( var i = 0 ; i < mdA.length ; i++ ){
  	    var opStr =""

	    if ( mdA[i].substr(0,2) == "= "  ) { 
	      opStr = "<h1>"+mdA[i].substr(2) +"</h1>\n"
	    } 

	    if ( mdA[i].substr(0,3) == "== "  ) { 
	      opStr = "<h2>"+mdA[i].substr(3) +"</h2>\n"
	    } 


	    if ( mdA[i].substr(0,1) == " "  ) {
	      opStr = "<pre>"+mdA[i] +"</pre>\n"
	    } 
	    if ( mdA[i].substr(0,1) == "*"  ) {
	      opStr = "<li>"+mdA[i].substr(1) +"</li>\n"
	    } 
		
		
        // how do you select if local or remote?  
	    if ( mdA[i].match(/png$|jpg$|gif$|PNG$|JPG$|GIF$/)  ) {
		  //<p><img src="http://www.dougrice.plus.com/images/imgWiki_a_004.jpg"><p>
	      //opStr = "<P><img src="+mdA[i] +" > </P>\n"
	      opStr = "<P><img src=/images/"+mdA[i] +" > </P>\n"
	    } 
		
	    if ( mdA[i].substr(0,4) == "http"  ) {
		  // <a href="http://www.dougrice.plus.com/">http://www.dougrice.plus.com/</a> 

          if ( mdA[i].match(/png$|jpg$|gif$|PNG$|JPG$|GIF$/)  ) {
	        opStr = "<P> <img src=\"" + mdA[i] + "\" >  </P>\n"
		  } else {
	        opStr = "<a href="+mdA[i] +" >"+mdA[i] +" </a>\n"
		  }

	    } 
		
		if  ( opStr.length == 0 ){
 		  opStr = "<p>"+mdA[i]+"</p>\n" 
		}
		
		document.getElementById( div_op ).innerHTML += opStr
		
	  }
  }
}
//showImages()

showMarkdown( "md", "md_op")



== Title text fixed text http://www.dougrice.plus.com/gbbook/calendar/bookingDemo.htm http://www.dougrice.plus.com/images/imgWiki_a_004.jpg * list * list imgWiki_AC1070.jpg

Markdown output

simple way to display a list of images

Use dir /b > op.txt to get list of files and edit this web page.
imgWiki_AC1009.jpg imgWiki_AC1010.jpg imgWiki_AC1011.jpg

Updates dump

This section dumps all updates