search

yandeu / five-server-vscode

⚡ VSCode Extension for Five Server.
https://marketplace.visualstudio.com/items?itemName=yandeu.five-server
Other
121 stars 9 forks source link

javascript not work #14

Closed XinyuWuu closed 1 year ago

XinyuWuu commented 2 years ago

I need highlight.js to highlight my code but it didn't work with five server. I have the same issue with chat.js

my test code: (download default.min.css and highlight.min.js from cdn)

<!DOCTYPE html>
<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>Document</title>
    <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.4.0/styles/default.min.css"> -->
    <link rel="stylesheet" href="default.min.css">
    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.4.0/highlight.min.js"></script> -->
    <script src="highlight.min.js"></script>
    <script>
        const five = document.querySelector('[data-id="five-server"]');
        if (five)
            five.addEventListener("connected",);
        else
            window.addEventListener("load", hljs.highlightAll());
    </script>
</head>

<body>
    <pre>
        <code class="language-js">
            const five = document.querySelector('[data-id="five-server"]');
            if (five)
                five.addEventListener("connected",);
            else
                window.addEventListener("load", hljs.highlightAll());
        </code>
    </pre>
</body>

</html>

the preview in chrome with five server:

image

open the html file without five server:

image

my config for five server

module.exports = {
    browser: "google-chrome --app=http://localhost:5555 --incognito --newwindows",
    highlight: false, // enable highlight feature
    injectBody: true, // enable instant update
    remoteLogs: true, // enable remoteLogs
    remoteLogs: "yellow", // enable remoteLogs and use the color yellow
    injectCss: true, // disable injecting css
    navigate: true, // enable auto-navigation
};

DevTools output

image

yandeu commented 2 years ago

Does it work with injectBody: false?

XinyuWuu commented 2 years ago

Yes, it will work with injectBody: false.