Viewing: document.blade.php
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous"> <link rel="stylesheet" href="{{ asset('css/prism.css') }}"> <script src="{{ asset('js/prism.js') }}"></script> <style> /*code{ display: block; color: #d4d4d4 !important; background-color: #1e1e1e; padding: 10px; border: 1px solid #444; border-radius: 5px; font-family: 'Courier New', monospace; white-space: pre-wrap; }*/ h1{ margin-top: 60px; border-top: #d5d5d5 dashed 5px; padding-top: 20px; } table{ width: 100%; margin-bottom: 20px; } table,tr,td,th{ border:2px solid; border-collapse: collapse; } td,th{ padding: 5px; } ul{ list-style: none; padding-left: 0; } li{ padding: 10px 0px; font-size: 16px; } ul li:hover{ font-weight: 600; cursor: pointer; } </style> </head> <body> <div class="container mt-5 mb-5"> <div class="row"> <div class="col-md-3 text-center"> <img class="web_logo" src="{{ asset('images/carton.png') }}" alt="" / style="height: 60px;"> </div> <div class="col-md-9 text-center"> <h2 class="mb-4">Evolve - API Documentation</h2> </div> <div class="col-12"> <hr> </div> <div class="col-md-3"> <div id="ul"></div> </div> <div class="col-md-9"> <?php echo $htmlContent ?> </div> </div> </div> <script> // Initialize Prism Prism.highlightAll(); // Get all h1 elements const h1Elements = document.querySelectorAll('h1'); // Create an ul element const ulElement = document.createElement('ul'); // Iterate over the h1 elements and create a li element for each one for (const [index, h1Element] of h1Elements.entries()) { // Append an id to the h1 element h1Element.id = `h1-${index}`; // Create a li element const liElement = document.createElement('li'); liElement.textContent = h1Element.textContent; liElement.dataset.h1Id = `h1-${index}`; // Add an event listener to the li element to focus on the corresponding h1 element when clicked liElement.addEventListener('click', () => { h1Element.scrollIntoView({ behavior: 'smooth' }); }); // Append the li element to the ul element ulElement.appendChild(liElement); } // Append the ul element to the body of the document document.getElementById('ul').appendChild(ulElement); </script> </body> </html>
Return