On Wednesday, November 6, 2013 12:27:46 PM UTC-6, Edward K. Ream wrote: I've hacked away on Brian's script. This has been a lot of fun. *All* of the real ideas are his.
My changes: - All icons are now at leoeditor.com. That shortens the urls. - Gave descriptive names for all css styles for headlines. - Indent html to reflect outline level. - Defined icon function to hide details of urls. - A few other cosmetic tweaks. As of rev 6243 it's in test.leo. Suppose we run it on the following test node: ====== cut ===== <?xml version="1.0" encoding="utf-8"?> <!-- Created by Leo (http://leoeditor.com/leo_toc.html) --> <?xml-stylesheet ekr_test?> <leo_file xmlns:leo="http://www.leo-editor.org/2011/leo"; > <leo_header file_format="2"/> <vnodes> <v t="ekr.20131106061011.2593" a="M"><vh>test</vh> <v t="ekr.20131106061011.2594"><vh>child</vh> <v t="ekr.20131106120655.2598"><vh>grandchild</vh></v> </v> <v t="ekr.20131106061011.2594"></v> </v> </vnodes> <tnodes> <t tx="ekr.20131106061011.2593"></t> <t tx="ekr.20131106061011.2594">This is a child. </t> <t tx="ekr.20131106120655.2598">grandchild</t> </tnodes> </leo_file> ========== The output will be in the body text of the node called "html display": ===== cut ===== <!DOCTYPE html> <html> <head> <style> ul.leo-tree-example { background-color: #ffffec; } li { background-image: url('https://raw.github.com/vivainio/leo/master/leo/Icons/box00.GIF'); background-repeat: no-repeat; background-position: 0px 5px; padding-left: 27px; } li.selected { background-color: lightgrey; } li.leaf { list-style-type: none; } li.plus { list-style-image: url('http://leoeditor.com/plusnode.gif') } li.minus { list-style-image: url('http://leoeditor.com/minusnode.gif') } li.leaf { background-image: url('http://leoeditor.com/box00.GIF') } li.body { background-image: url('http://leoeditor.com/box01.GIF') } li.mark { background-image: url('http://leoeditor.com/box02.GIF') } li.mark-body { background-image: url('http://leoeditor.com/box03.GIF') } li.clone { background-image: url('http://leoeditor.com/box04.GIF') } li.clone-body { background-image: url('http://leoeditor.com/box05.GIF') } li.clone-mark { background-image: url('http://leoeditor.com/box06.GIF') } li.clone-mark-body { background-image: url('http://leoeditor.com/box07.GIF') } li.dirty { background-image: url('http://leoeditor.com/box08.GIF') } li.dirty-body { background-image: url('http://leoeditor.com/box09.GIF') } li.dirty-mark { background-image: url('http://leoeditor.com/box10.GIF') } li.dirty-mark-body { background-image: url('http://leoeditor.com/box11.GIF') } li.dirty-clone { background-image: url('http://leoeditor.com/box12.GIF') } li.dirty-clone-body { background-image: url('http://leoeditor.com/box13.GIF') } li.dirty-clone-mark { background-image: url('http://leoeditor.com/box14.GIF') } li.dirty-clone-mark-body { background-image: url('http://leoeditor.com/box15.GIF') } </style> </head> <body> <ul class="leo-tree-example"> <li class='plus clone-mark'> test </li> <ul> <li class='plus dirty-clone-body'> child </li> <ul> <li class='leaf body'> grandchild </li> </ul> <li class='plus dirty-clone-body'> child </li> <ul> <li class='leaf body'> grandchild </li> </ul> </ul> </ul> </body> </html> ======== Copy the result to http://www.w3schools.com/html/tryit.asp?filename=tryhtml_intro (the left-hand pane). Click the "submit code" button to see the result. I think this is pretty cool. Edward -- You received this message because you are subscribed to the Google Groups "leo-editor" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To post to this group, send email to [email protected]. Visit this group at http://groups.google.com/group/leo-editor. For more options, visit https://groups.google.com/groups/opt_out.
