|
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width" />
|
|
<title>Object Detection with YOLO</title>
|
|
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
|
|
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
|
<link rel="stylesheet" href="style.css" />
|
|
<link
|
|
rel="stylesheet"
|
|
href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release/build/styles/default.min.css"
|
|
/>
|
|
<script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release/build/highlight.min.js"></script>
|
|
<script>
|
|
class BC {
|
|
constructor(elementId) {
|
|
this.container = document.getElementById(elementId);
|
|
this.headings = document.querySelectorAll("h1, h2, h3, h4");
|
|
this.currentHeading = null;
|
|
}
|
|
set_breadcrumb() {
|
|
const headings = document.querySelectorAll("h1, h2, h3, h4");
|
|
let currentHeading = null;
|
|
|
|
|
|
for (let i = 0; i < headings.length; i++) {
|
|
const heading = headings[i];
|
|
if (
|
|
heading.getBoundingClientRect().top <
|
|
window.innerHeight * 0.1
|
|
) {
|
|
|
|
currentHeading = heading;
|
|
} else {
|
|
break;
|
|
}
|
|
}
|
|
|
|
|
|
const breadcrumb = document.getElementById("breadcrumb");
|
|
if (currentHeading) {
|
|
breadcrumb.textContent = currentHeading.textContent;
|
|
}
|
|
}
|
|
}
|
|
console.log(marked);
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
fetch("interview-questions.md")
|
|
.then((response) => response.text())
|
|
.then((text) => {
|
|
const html = marked.marked(text);
|
|
document.getElementById("markdown-container").innerHTML = html;
|
|
document.querySelectorAll("pre code").forEach((block) => {
|
|
hljs.highlightBlock(block);
|
|
});
|
|
const bc = new BC("markdown-container");
|
|
bc.set_breadcrumb();
|
|
document.addEventListener("scroll", bc.set_breadcrumb);
|
|
})
|
|
.catch((error) =>
|
|
console.error("Error loading the Markdown file:", error)
|
|
);
|
|
});
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<div id="breadcrumb"></div>
|
|
<div id="markdown-container"></div>
|
|
</body>
|
|
</html>
|
|
|