Setting up Leo for web development and TEI XML

[Iohannes]

Hi, a beginner here again.

I would appreciate some advice on how to se tup Leo. I am no professional programmer. I am doing research in humanities but I like to do some little stuff here and there.

I would like to use Leo Editor for the following things:

- Simple webpage development (html, javascripts, css)
- Python scripts (mainly working with texts)
- XML (mainly TEI XML for texts)

- ideally also xQuery and XSLT

I have recently learnt the basics of Git and Github and I would like to integrate Leo into my workflow.

I would like to also set up Leo in the way that it plays nicely with other editors like Visual Studio Code.

My general problem is that tutorials I have seen, seem to be oriented on more experienced programmers than me. E.g., I don't understand many items in the menus but there seems to be no help regarding them.

Through try and error, I have figured a couple of things out right now but many not yet.

Some of my current problems:
- How to nicely import html files (and whole projects)? If I import them, they are creating an (almost) endless tree.
- Should I manually rename @auto to @clean when importing files?
- Can I visualize my webpage within Leo if I am using << sections >> - and how to make it load javascript file and images?
- How to rename files in Leo?
- Is there any autocompletion for javascript and other languages?

I would be very grateful for any help.

Best,

Jan

[Thomas Passin]

Hi, @Iohannes, I can give some suggestions for some of your questions.  You could use them as starting points. 

On Monday, April 20, 2020 at 12:20:48 AM UTC-4, Iohannes wrote:

Hi, a beginner here again.

I would appreciate some advice on how to se tup Leo. I am no professional programmer. I am doing research in humanities but I like to do some little stuff here and there.

 

Some of my current problems:

- How to nicely import html files (and whole projects)? If I import them, they are creating an (almost) endless tree.

I would start out with a single file (not a whole project), and get some practice in structuring a file and working with it.  You could do this for each of the major file type you want to work on.  And you may want to start from scratch rather than import a file to start off with.  That's just so you don't get stuck with Leo's standard structuring when it imports a file.  OTOH, the standard structure can always be changed, and it may give you some ideas.

If you want to start working on a particular existing file and don't want to import it, you could create a new node in the outline for it and just paste the text of the file into it.  You could name that node @file test1.html, or something similar.  When saved, the file would be created in the same directory as your outline.  I suggest starting off with the @file type because leo includes all its information about the file right in the file.  If you need to share the file with other (non-Leo) users, then @clean would probably be better since there would be no Leo-specific lines in the file.

Since there is no Leo-specific data in the @clean file, When Leo reloads the file, it has to match up the file contents against the organizing data it has stored.  That works well even when the file has been edited outside of Leo, but if there are too many or too radical changes, Leo might have trouble figuring it out the structure.

 
- Should I manually rename @auto to @clean when importing files?

I do, though I usually change to @file instead. That's mostly because I've never been clear on what @auto does that @file does not.  Someone else will be able to say.

[Thomas Passin]

Continuing on ...

On Monday, April 20, 2020 at 12:20:48 AM UTC-4, Iohannes wrote:

Hi, a beginner here again.

I would appreciate some advice on how to se tup Leo. I am no professional programmer. I am doing research in humanities but I like to do some little stuff here and there.

\

- Can I visualize my webpage within Leo if I am using << sections >>

The answer is a little mixed here, and also depends on what you mean by "visualize".  There are a few ways to do this.  I'll sketch them out, and if any of them sound like they will suit you, I could fill in some of the details.  Someone else may know more, too.

For displaying your file, by which I mean displaying it as it would be displayed in a browser:

1. You could use the viewrendered3 plugin.  This is still under development, but the current version will do the job pretty well.  However, it does not currently understand <<named sections>>.  It just takes all the nodes in a subtree in order and renders them within Leo in a browser pane.  You would not be able to put any non-html/javascript content into the file (like Leo directives).

At the moment, I believe that the plugin will only display the contents of a single node, not a whole subtree, but I could extend it to display an entire subtree (i.e., a file).

(If there were some interest, I could enhance the plugin to collect all the javascript in the subtree and send it to the browser.  Then you could include any amount of commentary, and other non-html text, in the outline).

2. You could create a button that sends the contents of the file to the system browser.  There has to be a python script behind the button, but it would be pretty simple, and we could work it out with you.

For displaying your file, by which I mean displaying the code (and possible non-html commentary, etc) in a more readable way, but not loading or executing it in a browser, the viewrendered3 plugin does a good job.

If you decide you don't need to visualized, render, or display the html file "in" Leo, then just start your file with @language javascript, and Leo will colorize it for you. You can still run the file in a browser as you would usually do pre-Leo, or by using a button (#2 above).  You can use the full range of @others and <<named sections>>.

I have attached screen captures showing the VR3 plugin used in both ways.

 

[Thomas Passin]

On Monday, April 20, 2020 at 12:20:48 AM UTC-4, Iohannes wrote:

Hi, a beginner here again.

I would appreciate some advice on how to se tup Leo. I am no professional programmer. I am doing research in humanities but I like to do some little stuff here and there.

- How to rename files in Leo?

If you have a file that is contained in an @file or @clean tree, you can just edit the file name or path in the node's headline.   Make sure to create any directories you specify before making the name change.  This change will create a new file in the new place, and will not delete the old one.

If this is not what you mean, please explain further.

[Thomas Passin]

On Monday, April 20, 2020 at 12:20:48 AM UTC-4, Iohannes wrote:

Hi, a beginner here again.

I would appreciate some advice on how to se tup Leo. I am no professional programmer. I am doing research in humanities but I like to do some little stuff here and there.

- ideally also xQuery and XSLT

Leo will colorize xml files if you start them with the directive @language xml. For tasks like validating, running transforms, etc., it's probably best to learn how to create little python scripts that you turn into buttons.  They can also be attached to a hot key if you like.  Here is what a script to run an xslt transform using Saxon might look like:

import subprocess
sax = r'java -jar d:\xml\saxon6-5-5\saxon.jar'.split()

# create this command:
# sax -o pass1.xml merge_driver.xml merge_pass1.xsl

sax.extend([
        '-o',
        'pass1.xml',
        'merge_driver.xml',
        'merge_pass1.xsl'
       ])

subprocess.call(sax)

So these little launch scripts aren't hard to create.

 

[Thomas Passin]

On Monday, April 20, 2020 at 12:20:48 AM UTC-4, Iohannes wrote:

Hi, a beginner here again.

I would appreciate some advice on how to se tup Leo. I am no professional programmer. I am doing research in humanities but I like to do some little stuff here and there.

One of the more useful little things I did was to create two buttons that appear above every outline:

1. Show Current Directory

2. Cmd Window Here

They both open in the currently effective directory, which is usually the directory of the outline itself.  That can be changed using @path directives. So, for example, if you changed an HTML file and wanted to load it into the browser, you could open e.g., Windows Explorer on its directory and then double click it.

Another thing that is easy to do is to add a menu item that opens the selected file in your favorite editor (or it could be any program, such as a browser).

Another very useful thing I have done is to show line numbers for files.  It takes a bit of tinkering to get them aligned right, but I think it's worth it.

Adding buttons, etc., like these examples is done by adding simple @settings nodes to the MyLeoSettings file.  If you would like to set these up, let us know and I can post the ones that I use a lot.

[Edward K. Ream]

On Sun, Apr 19, 2020 at 11:20 PM Iohannes <jan.ods...@gmail.com> wrote:

I would like to use Leo Editor for the following things:

- Simple webpage development (html, javascripts, css)
- Python scripts (mainly working with texts)
- XML (mainly TEI XML for texts)

- ideally also xQuery and XSLT

[snip]

Some of my current problems:

- How to nicely import html files (and whole projects)? If I import them, they are creating an (almost) endless tree.

You can tell Leo which html elements will create sub outlines. See the settings:

@data import-html-tags and

@data import-xml-tags

By default, many html elements create sub-outlines. In contrast, only a few xml elements create sub-outlines. Just choose the html elements you want.

Edward

[Iohannes]

Dear Edward,

thank you very much. It seems to work :).

Although what do you mean by "Just choose the html elements you want."? Can I somehow define which tags will be processed sub-outlines?

Thank you very much!

Jan

On Monday, 20 April 2020 17:27:11 UTC+2, Edward K. Ream wrote:

[Iohannes]

Dear Thomas,

thank you very much. I am now trying to use Leo for a simple webpage prototype. I see how it goes :).

Best,

Jan

[Edward K. Ream]

On Mon, Apr 20, 2020 at 11:29 AM Iohannes <jan.ods...@gmail.com> wrote:

Dear Edward,

thank you very much. It seems to work :).

Although what do you mean by "Just choose the html elements you want."? Can I somehow define which tags will be processed sub-outlines?

Yes. Edit the body of the @data import-html-tags node. Retain only those elements that you want to create sub-outlines.

Edward

[Thomas Passin]

However, you may not need to do anything special, at least for starters.  I just tried importing a very simple HTML file, and the importer broke it out into head, script, body, and image nodes.  That's a very good start.

I used the Files/Import Files/Import Any File menu Item.

On Monday, April 20, 2020 at 12:56:41 PM UTC-4, Edward K. Ream wrote:

[Thomas Passin]

On Monday, April 20, 2020 at 8:11:46 AM UTC-4, Thomas Passin wrote:

Continuing on ...

(If there were some interest, I could enhance the plugin to collect all the javascript in the subtree and send it to the browser.  

I just enhanced the viewrendered3 plugin so that, if the selected node starts with a "<" character, the entire subtree can be run in the browser pane.  Please note that this capability is very simple-minded, and does not know about Leo directives, etc.  In the future, I expect to improve this so that there can be markdown or restructured text in a tree, and the javascript will still load and run correctly.

The updated plugin should be in Leo's Github repo in the devel branch shortly.

[Matt Wilkie]

One of the more useful little things I did was to create two buttons that appear above every outline:

1. Show Current Directory

2. Cmd Window Here

They both open in the currently effective directory, which is usually the directory of the outline itself.  That can be changed using @path directives. So, for example, if you changed an HTML file and wanted to load it into the browser, you could open e.g., Windows Explorer on its directory and then double click it.

 

These and the following ones you mentioned would be useful generally. Let's save them in https://github.com/leo-editor/snippets. (send to me and I'll add, while we're waiting for your Github push workflow to get sorted out).

-matt

[Thomas Passin]

I've put them in the attached Leo outline.  All of them should go under the @settings node in MyLeoSettings.Leo.

Note that the two @button commands are specific to Windows.  They could be done in Linux, of course, but the exact commands would be specific to each linux distro.  Maybe someone would like to suggest example Linux commands.  For example, launching a GUI program like the file manager can be a little tricky, so help us get it set up right.

The actual paths to the programs in the @menuat items would have to be adjusted for some else's system.

I have included some keyboard shortcuts that I find very useful.  They don't conflict with any existing shortcuts so far as I know.  There is a group to make it easy to set, jump to, and remove node markers.  There is a pair that make it easy to comment out or uncomment a selection of lines.  And there is my favored ALT-0 for opening viewrendered3.

Actually, I would find it hard to operate for any period of time without these settings.  I use them all the time.

[Edward K. Ream]

On Monday, April 20, 2020 at 4:36:33 PM UTC-5, Thomas Passin wrote:

I've put them in the attached Leo outline.  All of them should go under the @settings node in MyLeoSettings.Leo.

Nice tricks. Thanks for sharing them.

Edward

[Iohannes]

Oh, that is great. I did not know where to look for it but hopefully I have found it.

I am a little bit still confused how all "@" work. But hopefully, I will find it out :).

Thanks,

Jan

On Monday, 20 April 2020 18:56:41 UTC+2, Edward K. Ream wrote:

[Iohannes]

Thanks! I have been using special XML editor that took care of these things before but I will try the script :).

Jan

[Thomas Passin]

On Tuesday, April 21, 2020 at 3:20:17 PM UTC-4, Iohannes wrote:

Oh, that is great. I did not know where to look for it but hopefully I have found it.

I am a little bit still confused how all "@" work. But hopefully, I will find it out :).

Thanks,

You can see how it works in the LeoSettings.leo outline.  These are settings that apply to all Leo outlines unless they are superseded. Open the outline from the Settings menu. The search for the phrase @data import-html-tags.  You can search for it using the Nav tab in the Tabs pane.  Or you can use CTRL-f but the Nav tab is easier.

The search will land you at a node titled @data import-html-tags. You will see right away how to include any elements you want that aren't already listed, or to remove elements you don't want to be split out into their own nodes.  You will also see there is another node named @data import-xml-tags.  That would be for your XML-related imports.

BTW, this is a typical way to discover things about Leo.  I didn't know about the import-html-tags setting until Edward mentioned it.  And like you, I wasn't quite sure how to use it.  It's just that I've come to learn some ways to look for things.

Now, how would you customize these nodes?  The best way is to copy the node and paste it into your MyLeoSettings.leo file, which you can open from the Settings menu. Settings here override those in leoSettings.leo. All settings nodes need to go under a top-level node named @settings.  Paste the copied node there (you can copy and paste nodes using the Outline menu).  Then change it as you like.

You can also put an @settings node at the top level of any outline.  Settings there override the ones of the same name in MyLeoSettings and LeoSettings, but they only apply to that particular outline.

You will need to reload the settings before they take effect.  You can do this by:

1) Closing and re-opening the outline, for settings in an outline;

2) Using the Settings/Reload Settings/Reload All Settings menu item;

3) Closing Leo and reopening it.

It's possible that certain rare settings might need a restart of Leo, but mostly the above will work.

Hope this helps!

[Matt Wilkie]

On Monday, 20 April 2020 14:36:33 UTC-7, Thomas Passin wrote:

I've put them in the attached Leo outline. 

I added them to Leo's snippets repo: https://github.com/leo-editor/snippets/tree/master

Thanks Thomas!

-matt