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, once a manager of aircraft maintenance, is now charming Python & Ruby. She has coded OpenGates.dev, #VetsWhoCode bot, Code Questions bot, & LGBTQ of the Day Bot. They love relatable writing.
Location
Richmond, Virginia
Education
Self Taught Python/Ruby, BBA in Small Business Mgmt, AS in Production Mgmt
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,
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.
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){thrownewError("Bad Response")}returnresponse.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, once a manager of aircraft maintenance, is now charming Python & Ruby. She has coded OpenGates.dev, #VetsWhoCode bot, Code Questions bot, & LGBTQ of the Day Bot. They love relatable writing.
Location
Richmond, Virginia
Education
Self Taught Python/Ruby, BBA in Small Business Mgmt, AS in Production Mgmt
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.
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.
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
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.
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,
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.
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.
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.
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 thethen
,then
, andcatch
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.
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.