Including HTML Script in Markdown File break html formating

Help
1

Hi,

I have an HTML timer script that I plan to include in a article post. To do this, I’m trying to include it in my article post by writing directly into the file example “20-20-2024-mypost.md”:

{% include timer.html %}

1
11003×473 103 KB

However, it seems that the inclusion code above is disrupting the HTML structure in my markdown. It’s converting the code into plain text, as shown here:

2
2813×565 171 KB

The normal format (without using {% include timer.html %}) looks like this:

3
3769×617 158 KB

The timer HTML is just an example; I have another HTML file that I plan to insert into the article.

Any suggestions on how to resolve this issue would be greatly appreciated. Thanks!

2

what is that? what are the contents?

3

something like

document.getElementById("read-full-article-btn").addEventListener("click", function() {
    var countdown = 10; 
    var countdownSpan = document.getElementById("countdown");
    countdownSpan.innerText = countdown;
    var countdownInterval = setInterval(function() {
        countdown--;
        countdownSpan.innerText = countdown;
        if (countdown <= 0) {
            clearInterval(countdownInterval);
           
        }
    }, 1000); 
});

the other one is Facebook button but mostly just java script

4

I would not be doing that inside the post content, instead I would do it in the layout with some front matter on the post like includetimer: true on the post and then in the layouts header (or footer?) do a test like `if page.includetimer then do the include.

Having that go into a markdown file does not seem like a good idea.

Are you wrapping it in a script tag?

5

“it in the layout with some front matter on the post”…I don’t understand this part - are you referring to the layout of my post? My post layout looks like this: [layout]

yes , the script i tried to include is formatted something like this jekyll-lstg/_includes/google-adsense.html at master · haoch/jekyll-lstg · GitHub

6

in your layout or where ever you have the head section add an if statement that checks the posts front matter to see if you should load something like:

{% if page.loadcustomjs %}
    <script
      src="/assets/js/{{page.loadcustomjs}}.js?v={{site.time | date: '%s'}}"
      type="text/javascript"
    ></script>
{% endif%}

then in a post if you want that to load the front matter of that post would have something like:

---
loadcustomjs: name_of_my_js_file
---

here I have the actual script tag as my use case is fairly simple but on the if statement you could also be loading an include with your script code in that.

If you don’t need to load the script just don’t use the front matter at all and the if will be false.

In looking at your repo you would put the if statement above into your head include - within the head tag.

If you want it on a lot of pages you could probably do something else. My use case is each page needed its own custom js file to load.

7

Ah, I see what you mean. How can I call it in a specific location? Let’s say I want it to be displayed under h2 or before the download subheading.

### Keywords

*Keyword Not Available*

### Downloads:
(insert location)

Download data is not yet available."
8

the empty div with the class is the important part for positioning - not the script itself.

So you need to play with just putting an empty div with that class name in the markdown file and then just add the script somewhere. I think you may need to load the script after the body instead of in the head as it likely needs to see that the div with the class has been loaded already.

I would play with adding the div first while having the script hard coded before trying to do the if statement /front matter stuff. Get it working in some way first, even if the button is in the wrong place and then work at it until you get what you want.

9

I apologize, rdyar, if I’m a bit slow to grasp what you’re trying to say because I don’t have a coding background.

Could you provide an example of the script format you’re referring to? I still can’t understand how the script can be invoked in the mentioned div placeholder.

In the footer/body or in script.html:

<div class="timer-container">
  script code
</div>

Then in the content (.md), do we call back the same div?

<div class="timer-container">

10

in looking at your code snippet I mis-read some of it. It has 2 scripts and then an tag. That ins tag is the thing google is probably using in the js to show the add.

I think your issue is putting this into a markdown file because the markdown processor is not expecting javascript.

I would play around with your script on a normal html page to see if you can get it to work at the simplest level, and then try re-arranging it on that same simple page to have the 2 scripts be in the footer and then see if the add still works.

Then work on the actual post and see what happens when you put just the <ins tag bits into the markdown and have the 2 scripts load in the footer. The order they load in is probably important.

script 1:
<script async src="http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

script 2:
<script> (adsbygoogle = window.adsbygoogle || []).push({}); </script>

the actual html:

<ins class="adsbygoogle"
	     style="display:inline-block;width:160px;height:600px"
	     data-ad-client="ca-pub-7328585512091257"
	     data-ad-slot="6991986330">
</ins>
11

I’m not quite sure about. It appears that the HTML layout is consistently breaking, but interestingly, this only happens in Firefox, which is my primary web browser. When I checked using Edge, Chrome, and Opera, the format seems intact.

This might be related to a bulk data conversion into Markdown format. I hired a developer to write a Python script for this conversion. Currently, I’m sticking with the original format:

{% include timer.html %}

In Firefox (tested locally), the layout still has errors. However, after uploading to GitHub Pages, the HTML layout remains normal.

Thank you, rdyar, for your time and the assistance you’ve provided me with.