[Home]SimpleMarkdown

HomePage | RecentChanges | Preferences

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 reg exp

Using information from: https://randyperkins2k.medium.com/writing-a-simple-markdown-parser-using-javascript-1f2e9449a558

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

http://www.dougrice.plus.com/hp/news/md2.htm - with added styles 



// use list of replace
function markdownParser( text ) {
	const toHTML = text
		.replace(/^### (.*$)/gim, '<h3>$1</h3>') // h3 tag
		.replace(/^## (.*$)/gim, '<h2>$1</h2>') // h2 tag
		.replace(/^# (.*$)/gim, '<h1>$1</h1>') // h1 tag
		// my format
		.replace(/^=== (.*$)/gim, '<h1>$1</h1>') // h1 tag
		.replace(/^== (.*$)/gim,  '<h1>$1</h1>') // h1 tag

		.replace(/^ (.*$)/gim, '<pre>$1</pre>') // monospace - pre tags each line.

		// images , URLs
		.replace(/^(.*jpg|.*JPG|.*png|.*PNG|.*gif|.*GIF)$/gim, '<img src="$1" ><br>') // images
		.replace(/^(http.*)$/gim, '<a href="$1" >$1</a>') // URL
			
		// inline BOLD and italics	
		.replace(/\*\*(.*)\*\*/gim, '<b>$1</b>') // bold text
		.replace(/\*(.*)\*/gim, '<i>$1</i>'); // italic text
	return toHTML.trim(); // using trim method to remove whitespace
}



function showMarkdown( div_ip, div_op  ){
  var op2Str = ""
  if ( document.getElementById( div_ip ) ) {
      md = document.getElementById( div_ip ).innerHTML
      // The Markdown text is at the top of the page
      // Blank it when read.	 
	 document.getElementById( div_ip ).innerHTML =""
      // or Wrap input in monospaced tags 	 
	 document.getElementById( div_ip ).innerHTML ="<pre>"+md+"</pre>"
	 document.getElementById( div_op ).innerHTML =""
	 var op2Str = markdownParser( md )
     document.getElementById( div_op ).innerHTML = op2Str
     return
  }	  
}

// convert Markdown to HTML.
showMarkdown(  "md", "md_op"  )

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

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

used this code: 


<html>
<body>
<style>

* { font-family: 'Lucida Grande', Verdana, Arial, helvetica, Sans-Serif; }
.md    { padding:25px; background-color:#eec;    }
.md_op { padding:25px; background-color:#aa9;  }
img {  padding-top: 10px; padding-bottom: 10px; height:auto; width:90%; }

</style>

<div id=md class=md >
example
== title
  monospaced
IMG_2383_resized.JPG
</div>

<div id=md_op class=md_op >

</div>

<script>

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

      // or Wrap input in monospaced tags 	 
	 document.getElementById( div_ip ).innerHTML ="<pre>"+md+"</pre>"
	 document.getElementById( div_op ).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 )

  	  var opStr =""
	  
      // parse for a markdown 
	  for( var i = 0 ; i < mdA.length ; i++ ){
  	    opStr =""
		// get line
        line = mdA[i]
        // Title  		
	    if ( line.substr(0,2) == "= "  ) { 
	      opStr = "<h1>"+line.substr(2) +"</h1>\n"
	    } 
        // Title  		
	    if ( line.substr(0,3) == "== "  ) { 
	      opStr = "<h2>"+line.substr(3) +"</h2>\n"
	    } 

        // fixed
	    if ( line.substr(0,1) == " "  ) {
	      opStr = "<pre>"+line +"</pre>\n"
	    } 
		
		// Look for a filename of a picture
        // how do you select if local or remote?  
	    if ( line.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="+line +" > </P>\n"
	      //opStr = "<P><img src=/images/"+line +" > </P>\n"
	    } 
		
		// Look for URL link to web page or picture
	    if ( line.substr(0,4) == "http"  ) {
		  // <a href="http://www.dougrice.plus.com/">http://www.dougrice.plus.com/</a> 

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

	 	if  ( opStr.length == 0 ){  
 		    opStr = "<p>"+line+"</p>\n"			
		}  
		op2Str += opStr
        
	  }
      // update document once
	  document.getElementById( div_op ).innerHTML = op2Str
	  
  }
}
</script>
		 

<script>

// convert Markdown to HTML.
showMarkdown( "md", "md_op")
</script>

</body>
</html>

See: http://www.dougrice.plus.com/hp/news/md.htm

This is a simple way for simple notes and lists of photos.

The style sheet is important.

Simple Markdown



<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.

HomePage | RecentChanges | Preferences
This page is read-only | View other revisions
Last edited February 21, 2023 7:50 am by dougrice.plus.com
Search:
home page