| <!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("object-detection.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>
|
|
|
