DEV Community

Vicki Langer
Vicki Langer

Posted on

print or extend Python output to an HTML file

Alt Text

Typically, writing out my problem ends with more clarity and I solve it on my own. That doesn't seem to be the case this time. So, would you be able to assist?

Background

I am working on my personal portfolio and it's in the form of a code snippet. I have one step left before I'm done. I would like to remove the currently redundant python snippet.

Right now, I have a Python file with my portfolio contents and I have an HTML file with the Python stuff manually pasted into a a code block.

I figure there must be a way to extend or print the output and have it show up in my code block. I feel like this should be able to be done with something like Jinga2.

I have tried tons of searching, but I must be using the wrong search terms. Being honest, I don't know what I don't know.

Problem

Thing is, I don't desire to write a brand new file. I just want my python stuff in the code block of the HTML file.

Top comments (12)

Collapse
 
deciduously profile image
Ben Lovy

I also don't know the solution, but it sounds to me like you're already on the right track with Jinja2. It's a format-agnostic template system, I think you should be able to use it to do what you need here, but take this with all the grains of salt... it's what I'd try first, for what that's worth.

Collapse
 
vickilanger profile image
Vicki Langer

Yeah, I thought Jinja2 would do it, but so far it seems to only work with HTML files. I’ll keep looking though.

Collapse
 
mikecase profile image
Mike

I've done something like this before. Check out pystache. It allowed me to write nginx configs.

github.com/defunkt/pystache

My GitHub repo for my use of pystache is github.com/MikeCase/mkvhost if you want to check it out. Can't promise it's pretty though :p

Collapse
 
vickilanger profile image
Vicki Langer • Edited

Thanks! I see how that might help. I'll check it out further.

Collapse
 
gadgetaddict profile image
Michael • Edited

I'm a Rookie. I Downloaded the project files from GitHub. I Opened .index and the error message "Unable to fetch portfolio, try again later". All files are together in my downloads directory.
I looked at the PRISM file and I have no idea what that code does.

Collapse
 
miniscruff profile image
miniscruff

You won't be able to do that with plain HTML, you could do it with a script tag with a fetch request that edits the DOM. Could write up a sample later if you are interested.

Collapse
 
vickilanger profile image
Vicki Langer

Would it have to be a JavaScript thing or could I use the script tag for python stuff? That’s definitely not something I’ve done before. I’m not sure what a DOM is either,

Collapse
 
miniscruff profile image
miniscruff

Sure, so DOM is the document object model. It is what makes up a website. Each "element" you see on a web page is one object on the document. See MDN DOM reference.

Python, as of now, is not understood by browsers. So placing python inside a script tag will not do anything. However, a tiny bit of javascript should do the trick.

To understand the next bit you have to understand that as part of GitHub pages, which you use to host, they host the whole repo. Using index as the standard "default" file. Example both vickilanger.com and vickilanger.com/index.html map to the same page. We can see that your python file is hosted at vickilanger.com/portfolio.py. This by default will try and download the file, and run it. We will use this to our advantage.

We can use the javascript fetch API, with MDN docs here to dynamically request your portfolio file and insert the text inside an element.

So first, we can remove the code from the HTML and add an ID label to the code block. We will use this later. We also supply some default text that will be displayed while the fetch is in progress.

<code class="language-python match-braces" id="portfolio-code">
  Fetching portfolio...
</code>

Then at the end of the body, we can add a script block with some javascript to dynamically updated it after the page is loaded.

<script>
  fetch("/portfolio.py")
    .then(response => {
      if(!response.ok) {
        throw new Error("Bad Response")
      }
      return response.text()
    })
    .then(text => document.getElementById("portfolio-code").innerText = text)
    .catch(errror => document.getElementById("portfolio-code").innerText = "Unable to fetch portfolio, try again later")
</script>

This will request your portfolio file. If the response failed it will raise an error. Parses the text, and updates the code block to the text of the file, using the code element we tagged with ID above. On any error, it displays an error message.

That should do it, I tested it locally but I used the full URL, you should be able to use the local path URL.

Thread Thread
 
vickilanger profile image
Vicki Langer

Wow! Thank you so much for this awesomely detailed response.

DOM makes a lot more sense, thanks.


JavaScript isn't my thing. I just wanna make sure I understand what you gave me. There's a request fetch. Then the then, then, and catch are the exception handling, right? When reading => what should I be saying in my head?

So, the script works, but now the syntax highlighting from prism.js isn't working. I wonder if that's just going to be a tradeoff I have to make.

Thread Thread
 
miniscruff profile image
miniscruff

Then handles the response as a chain. This is due to the asynchronous nature of JavaScript. The catch is the error handling portion. => is an anonymous function. Think of it as a shorthand for def but inline. Similar to lambda in Python but not limited to one line. Not sure why prism doesn't like it. Might have to pass the text into prism before setting to on the ID. I do not have experience with prism.

Collapse
 
mzahraei profile image
Ardalan

I've done something like this before but with JS you can write python results as text for js HTML tag maker.

Collapse
 
mzahraei profile image
Ardalan

I like it it's cool.
Can you recommend me any source about this Article?