code copy paste

-

 <!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <!-- Replace agate with your theme - find themes at https://highlightjs.org/demo -->
    <link rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/tomorrow-night-bright.min.css">

    <!-- For icons -->
    <script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
    <script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>

    <style>
        .code-block {
            position: relative;
            width: 80%;
            height: auto;
            margin: auto;
            font-size: 1.2rem;
            overflow: hidden;
        }

        .code-block pre {
            border-radius: 10px;
            background-color: #686de0;
        }

        .code-block .copy-btn {
            position: absolute;
            padding: 10px 20px;
            background-color: whitesmoke;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 5px;
            right: 20px;
            top: 55px;
            cursor: pointer;
            transition: 0.5s;
            font-weight: 600;
        }

        .code-block .copy-btn:hover {
            transform: scale(1.1);
        }

        .green {
            color: #6ab04c;
        }

        .black {
            color: #000;
        }
    </style>
</head>

<body>
    <h1>HTML First Code</h1>

    <!-- Only add code inside the code-block -->
    <div class="code-block">
        <div class="copy-btn">
            <ion-icon name="copy-outline"></ion-icon>
        </div>
        <!-- Change your language using this -->
        <pre>
            <code class="language-html">
if your code in html first parse your code
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;Hello World&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;h1&gt;Hello, World!&lt;/h1&gt;
&lt;/body&gt;
&lt;/html&gt;
            </code>
        </pre>
    </div>


    <!-- Only add code inside the code-block -->
    <div class="code-block">
        <div class="copy-btn">
            <ion-icon name="copy-outline"></ion-icon>
        </div>
        <!-- Change your language using this -->
        <pre>
            <code class="language-html">
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;Hello World 2&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;h1&gt;Hello, World! 2&lt;/h1&gt;
&lt;/body&gt;
&lt;/html&gt;
            </code>
        </pre>
    </div>
    <!-- JS -->
    <script>
        let htmlData = [];
        function storeData() {
            let copyBtn = document.querySelectorAll(".copy-btn");
            Array.from(copyBtn).forEach((btn) => {
                let icon = btn.querySelector("ion-icon");
                let codeBox = btn.parentElement.querySelector("code")
                let codeBoxHtml = codeBox.innerHTML;
                let storeData = codeBoxHtml.replaceAll("&gt;",">").replaceAll("&lt;","<")
                htmlData.push(storeData)
            })
        }
        storeData()
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            hljs.highlightAll();
        });

        let copyBtn = document.querySelectorAll(".copy-btn");

        function copyClicpbaord(index) {
            navigator.clipboard.writeText(htmlData[index])
        }
        function handleBtnClick(btn, element,index) {
            let icon = btn.querySelector("ion-icon");
            copyClicpbaord(index)
            icon.name = "checkmark-circle-outline";
            icon.classList.remove("block");
            icon.classList.add("green");
            if (icon.name === "checkmark-circle-outline") {
                setTimeout(() => {
                    icon.name = "copy-outline";
                    icon.classList.remove("green");
                    icon.classList.add("black");
                }, 2000);
            }
        }

        Array.from(copyBtn).forEach((btn,index) => {
            btn.addEventListener("click", (e) => { handleBtnClick(btn, e,index) });
        })
    </script>
</body>

</html>

Comments

Post a Comment

Popular posts from this blog

Express Production Setup - 4 | HELMET

-
 Helmet helps secure Express apps by setting HTTP response headers. it will remove all header from express app like X-Powered-By : express  we can remove using  express.remove("x-powered-by"); but it's make it easy * also help  XSS attacks index.js      import express from " express ";     import helmet from " helmet ";     const app = express ();     // Use Helmet!     app . use ( helmet ());     app . get (" / ", ( req , res ) => {     res . send (" Hello world! ");     });     app . listen ( 8000 );
Read more

Express Production Setup - 3 | CORS

-
 Express Production Setup - 3 | CORS  To enable Cross-Origin Resource Sharing (CORS) in an Express.js application, you can use the cors middleware package. This middleware allows you to control which domains can access your API, what methods are allowed, and what headers can be sent in requests. index.js     const express = require (' express ');     const cors = require (' cors ');     const app = express ();     // CORS options to allow only POST requests     const corsOptions = {         origin: ' http://example.com ', // Replace with your client's origin         methods: [' POST ', " GET ", " PUT ", " PATCH ", " DELETE "],         credentials: true // allow cookies     };     // Apply CORS middleware with the above options     app . use ( cors ( corsOptions ));     // Example route     app . post (' /a...
Read more

Ensuring File Creation in the Current Directory when Converting Python (.py) Script to Executable (.exe).

-
Image
Ensuring File Creation in the Current Directory when Converting Python (.py) Script to Executable (.exe). When you create a file in Python within the current directory, everything works seamlessly. However, if you decide to convert your Python script into a standalone executable (.exe) using tools like PyInstaller, you might encounter a situation where the file is created in a temporary folder, and upon code execution completion, it mysteriously disappears. To overcome this challenge and ensure that your file appears in the current directory, consider using the following code snippet: Explanation: In the above code, we use sys.frozen to check if the script is running in a frozen (compiled into an executable) environment. This is particularly relevant when the script is converted to a standalone executable using tools like PyInstaller. When the script is running as a .py file, myPath is set to the absolute path of the script using os.path.abspath(__file__). When the script is running as...
Read more