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>
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" )
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.
<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.
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.
* 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.
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 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.