index.html

<!DOCTYPE html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSPSH</title>
    <script src="./Source/CSPSH.js" type="module"></script>
    <link rel="stylesheet" href="index.css">
    <link rel="shortcut icon" href="/Resources/CSPSH(withGrad).png" type="image/x-icon">
</head>

<body>
    <!-- a demo code of addition in every language that CSPSH supports you can add your language by cloning the project. -->
    <h1 style="margin: 1rem;">
        Code Tabs:
    </h1>
    <div class="cspshBuildTabs" mode="simple">
        <div class="cspsh" name="home" lang="html" theme="cspsh" linecount="true">
            &lt;!DOCTYPE html&gt;
            &lt;html lang="en"&gt;
            &lt;head&gt;
            &lt;title&gt;Home&lt;/title&gt;
            &lt;script src="script.js"&gt;&ZeroWidthSpace;&lt;/script&gt;
            &lt;link href="style.css" rel="stylesheet"&gt;&ZeroWidthSpace;&lt;/link&gt;
            &lt;/head&gt;
            &lt;body&gt;
            &lt;h1&gt;Hello World&lt;/h1&gt;
            &lt;/body&gt;
            &lt;/html&gt;
        </div>
        <div class="cspsh" name="style" lang="css" theme="monokai" linecount="true">
            body{
            background-color: black;
            color: white;
            }

            h1{
            font-size: 5rem;
            }
        </div>
        <div class="cspsh" name="script" lang="js" linecount="true" theme="drakula">
            const a = 10;
            const b = 20;
            let c = add(a, b);
            console.log(c);

            function add(a, b) {
            console.log("retro effect!")
            return a + b;
            }
        </div>
    </div>
    <h1 style="margin: 1rem;">
        Without Code Tabs:
    </h1>
    <div class="cspsh" name="add" lang="py" theme="drakula" linecount="true">
        def add(a, b):
            return a + b
        a = 10
        b = 20
        c = add(a, b)
        print(c)
    </div>
    <div class="cspsh" name="add" lang="java" theme="cspsh">
        public class Main {
        public static void main(String[] args) {
        int a = 10;
        int b = 20;
        int c = add(a, b);
        System.out.println(c);
        }
        public static int add(int a, int b) {
        return a + b;
        }
        }
    </div>
    <div class="cspsh" name="add" lang="sts" theme="drakula">
        //storyscript is a language developed by lines-of-code. You can search story script in github to know more

        int a = 10
        int b = 20

        print(a + b)
    </div>
    <div class="cspsh" name="add" lang="c" theme="cspsh">
        #include &lt;stdio.h&gt;

        int main() {
        int a = 10;
        int b = 20;
        int c = add(a, b);
        printf("%d", c);
        return 0;
        }

        int add(int a, int b) {
        return a + b;
        }
    </div>
    <div class="cspsh" name="simple_mode_add" lang="js" theme="cspsh" mode="simple">
        const a = 10;
        const b = 20;
        let c = add(a, b);
        console.log(c, "simple mode");

        function add(a, b) {
        return a + b;
        }
    </div>
    <script src="index.js" type="module"></script>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@300&display=swap" rel="stylesheet" />
</body>

</html>