DEV Community

print or extend Python output to an HTML file

Vicki Langer on January 17, 2020

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 a...

Read full post

Mike • Jan 18 '20

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

Vicki Langer • Jan 19 '20 • Edited

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

Ben Lovy • Jan 17 '20

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.

Vicki Langer • Jan 17 '20

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

miniscruff • Jan 18 '20

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.

Vicki Langer • Jan 18 '20

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,

miniscruff • Jan 18 '20

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.

Vicki Langer • Jan 18 '20

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.

miniscruff • Jan 19 '20

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.

Michael • Jul 18 '20 • 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.

Ardalan • Feb 1 '20

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

Ardalan • Jan 18 '20

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