I attached a sample leo file and the desired html output. I'm not sure the best way to add tool tips, title, and sub-title in leo. My actually leo file that I want to generate the html for caused RST3 to generate errors.
@tbp1 I envision running every node body through markdown render. Thank you for the snippet of code. The code will get me started. @edward My goal is to generate a self contained html file that I can send to someone so they can view the content I created without installing leo. I'm using leo as an outlining tool and not as a software development tool. With the html someone can double click the html file and view a representation of the outline in a browser. Some people have issues with installing software so I'm trying to avoid forcing someone to install leo. Some businesses require IT sign off before even thinking about installing software. Having to install leo could be a blocker. LeoJS <https://boltex.github.io/leojs/> will not work since it has to be setup with VS code. It is easier for someone to install leo than setup LeoJS <https://boltex.github.io/leojs/>with VS code. A non-dev will be lost in VS code. My plan is to use leo to quickly create prototype variations and then if the idea gets traction, rewrite in an actually web app. I'm debating if it is easier to go straight to the web app. I'm going on using leo 20 years and I love organizing content with it. I use leo daily to organize my notes. On Wednesday, September 3, 2025 at 4:26:39 PM UTC-4 [email protected] wrote: > The OP wrote that he knows how to make collapsing outline-style lists. I > used to make them with nested UL lists, formatted with CSS to automatically > apply the indentation. The CSS can also be used to provide vertical guide > lines for the indent level. IMO, one doesn't need to import packages or > use templates to do the job, but everything depends on the detailed things > the OP wants to do. I used frames to contain the left and right panels, but > that, I know, is considered old fashioned. > > Once you have the expandable outline under control, the next thing to > solve is how to link a click on an outline node with the display of its > contents. It's not hard, but you do need to figure it out. > > Then you may want a search function ... > > On Wednesday, September 3, 2025 at 2:32:45 PM UTC-4 jkn wrote: > >> >> ISTM that the OP just wants a 'style' of HTML output that will be >> rendered with output text optionally expanded or collapsed, according to >> where a viewer might click on the rendered output. >> >> This is often seen in modern web pages when looking at code-oriented >> content. I haven't got an example to hand, but one should be easy to find. >> >> I'd have thought the main issue was understanding how such >> HTML/CSS(+Javascript?) works ... once that is done, actually creating the >> exporter should be fairly easy. >> >> Just my $.02 ... >> J^n >> >> On Wednesday, September 3, 2025 at 6:18:17 PM UTC+1 [email protected] >> wrote: >> >>> On Wednesday, September 3, 2025 at 11:23:48 AM UTC-4 brian wrote: >>> >>> I don't want the person to be able to modify the outline. That is what >>> I meant by "read only". I want someone to view a representation in a >>> browser that is similar to how it looks in the installed version of Leo and >>> without having to install the leo executable. I do want expand and >>> collapse. I know how to create expand and collapse in html but I'm not >>> sure how to get the content out of Leo. >>> >>> >>> Getting output from Leo is easy. You walk the tree and for each node >>> output headline and body text with whatever format you like. The hard part >>> is working out what the HTML should be, including how to manage and display >>> the nesting level. >>> ... >>> > I'm only concerned about exporting the outlines I create. My outlines >>> mostly have text but a few nodes have markdown. >>> >>> Do you want those markdown nodes to look as they do in the body editor, >>> or do you want them rendered by a Markdown processor? >>> >>> > I'm not sure what you mean by "write the outline in RsT" and run >>> rst3. When I ran Rst3, all the content in the html was on the left margin >>> and it got confused about some of the node headlines (e.g., something like >>> "I. Learn about leo"). I don't want a lot of constraints on the outlines >>> I create. I'm fine with minor edits but I don't want have to rework every >>> node. After trying Rst3, I assumed it could not do the task. If rst3 can >>> do this, I'd rather not write a plugin. Can you point me in the right >>> direction to get rst3 to do what I want? >>> >>> The rst3 command is oriented to creating an overall tree of >>> RestructuredText (RsT) files in a form that Sphinx will be able to process >>> to produce a set of documentation files, which are usually HTML but could >>> also be pdf or other formats. The command by itself isn't going to create a >>> nice finished HTML file. For this to make sense, the nodes in an @rst tree >>> need to be written using RsT (Sphinx can be made to use Markdown files too, >>> but the rst3 command only knows about RsT). >>> >>> > I looked at VR3 and I could figure out how to export my entire >>> outline. The documentation I found was sparse and I didn't dig into the >>> source code. >>> >>> VR3 renders the tree's body, creating headlines using the text of each >>> node's headline. It sounds like you want to include an outline panel, and >>> VR3 won't do that. >>> >>> > I've written the HTML with a hard coded outline where nodes will >>> expand and collapse (used Bootstrap). I just need to get my data out of >>> Leo and into my html. I planned on using the Django template engine to >>> generate the html. I assumed this would be an easy task. LeoJS is a huge >>> undertaking. It seems tweaking rst3 to export to the Django template >>> engine would be simple tweak of rst3. If I'm missing something, let me >>> know. >>> >>> As I said, you walk the tree of nodes in your outline, and output >>> whatever you want based on the output format you want to create. Walking >>> the tree is easy. I've never used Django templates and I don't know what >>> they should look like. To process the tree starting at the currently >>> selected node (c.p), your script could look like this: >>> >>> for p1 in c.p.subtree(): >>> headline = p1.h >>> text = p1.b >>> # Do something with the the headline and text >>> # Indentation level is p1.level() >>> >>> > I'm looking for the easiest path to go from my Leo outline to html in >>> a format I want. >>> ... It looks like I’ll have to write a plugin. Would RST3 be the best >>> place to start? >>> >>> You don't need a plugin, as best I can see, certainly not for >>> experimenting until you can produce what you want. You only need a Leo >>> script, which you can attach to a button. Then select the top node you want >>> to start from, and press the button to run the script. You could develop >>> the whole thing in Leo's workbook. >>> >>> As I said, the hard part is figuring out what the output should look >>> like. Anything that links two different nodes together is going to be >>> harder. Anything that assembles several pieces of information (like >>> tooltips that can optionally be made visible ) is going to be harder. But >>> those are not Leo issues. They are format and output issues. That's what >>> you need to figure out first. >>> >> -- 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 view this discussion visit https://groups.google.com/d/msgid/leo-editor/c4560755-0dfa-4c02-aeb1-fc077af373d9n%40googlegroups.com.Title: Nested Collapsible Sections — v7 (CSS tooltips, production)
Documentation with Collapsible SectionsClick on a heading to expand or collapse its content. This is the content under Section 1. This is nested content under Section 1.1. This is even more deeply nested content under Section 1.1.1. This is the content under Section 2. This is nested content under Section 2.1. This is the content under Section 3. This is nested content under Section 3.1. |
<?xml version="1.0" encoding="utf-8"?> <!-- Created by Leo: https://leo-editor.github.io/leo-editor/leo_toc.html --> <leo_file xmlns:leo="https://leo-editor.github.io/leo-editor/namespaces/leo-python-editor/1.1"; > <leo_header file_format="2"/> <globals/> <preferences/> <find_panel_settings/> <vnodes> <v t="asdfafdsafdasfdsa.20250903214546.2"><vh>@title</vh></v> <v t="asdfafdsafdasfdsa.20250903214822.1"><vh>@sub-title</vh></v> <v t="asdfafdsafdasfdsa.20250903214841.1"><vh>Section 1</vh> <v t="asdfafdsafdasfdsa.20250903214951.1"><vh>@tool-tip</vh></v> <v t="asdfafdsafdasfdsa.20250903215036.1"><vh>Section 1.1</vh> <v t="asdfafdsafdasfdsa.20250903215105.1"><vh>@tool-tip</vh></v> <v t="asdfafdsafdasfdsa.20250903215232.1"><vh>Section 1.1.1</vh> <v t="asdfafdsafdasfdsa.20250903215401.1"><vh>@tool-tip</vh></v> </v> </v> </v> <v t="asdfafdsafdasfdsa.20250903215439.1"><vh>Section 2</vh> <v t="asdfafdsafdasfdsa.20250903215544.1"><vh>@tool-tip</vh></v> <v t="asdfafdsafdasfdsa.20250903215607.1"><vh>Section 2.1</vh> <v t="asdfafdsafdasfdsa.20250903215657.1"><vh>@tool-tip</vh></v> </v> </v> <v t="asdfafdsafdasfdsa.20250903215802.1"><vh>Section 3</vh> <v t="asdfafdsafdasfdsa.20250903215831.1"><vh>@tool-tip</vh></v> <v t="asdfafdsafdasfdsa.20250903215920.1"><vh>Section 3.1</vh> <v t="asdfafdsafdasfdsa.20250903220401.1"><vh>@tool-tip</vh></v> </v> </v> </vnodes> <tnodes> <t tx="asdfafdsafdasfdsa.20250903214546.2">Documentation with Collapsible Sections</t> <t tx="asdfafdsafdasfdsa.20250903214822.1">Click on a heading to expand or collapse its content.</t> <t tx="asdfafdsafdasfdsa.20250903214841.1">This is the content under Section 1.</t> <t tx="asdfafdsafdasfdsa.20250903214951.1"> Random tip: Rotate the knob gently to start calibration.</t> <t tx="asdfafdsafdasfdsa.20250903215036.1">This is nested content under Section 1.1. </t> <t tx="asdfafdsafdasfdsa.20250903215105.1">Note: This option affects thermal drift in low-power modes</t> <t tx="asdfafdsafdasfdsa.20250903215232.1">This is even more deeply nested content under Section 1.1.1.</t> <t tx="asdfafdsafdasfdsa.20250903215401.1">Hint: Verify the sensor's zero offset before collecting data.</t> <t tx="asdfafdsafdasfdsa.20250903215439.1">This is the content under Section 2.</t> <t tx="asdfafdsafdasfdsa.20250903215544.1"> Quick: Save changes before switching configuration modes.</t> <t tx="asdfafdsafdasfdsa.20250903215607.1">This is nested content under Section 2.1.</t> <t tx="asdfafdsafdasfdsa.20250903215657.1">Reminder: Use secure keys in production builds.</t> <t tx="asdfafdsafdasfdsa.20250903215802.1">This is the content under Section 3.</t> <t tx="asdfafdsafdasfdsa.20250903215831.1">FYI: This section lists recent release changes. </t> <t tx="asdfafdsafdasfdsa.20250903215920.1">This is nested content under Section 3.1.</t> <t tx="asdfafdsafdasfdsa.20250903220401.1">Pro tip: Run heavy tasks in batch mode to save time.</t> </tnodes> </leo_file>
