DEV Community

loading...

Discussion on: print or extend Python output to an HTML file

Collapse
vickilanger profile image
Vicki (she/her) Author

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 (she/her) Author

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.