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.