code-webview/index.js at main · zylinktech/code-webview · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
const express = require('express');
const fs = require('fs');
const path = require('path');
const hljs = require('highlight.js'); // Syntax highlighting
const app = express();
const port = 3000;

// Serve static files (such as .js, .html) for the client
app.use(express.static('public'));

// Serve the highlighted code with dark background
app.get('/:file', (req, res) => {
  const filePath = path.join(__dirname, req.params.file);

  if (fs.existsSync(filePath)) {
    const fileContent = fs.readFileSync(filePath, 'utf8');
    const fileExtension = path.extname(filePath).slice(1); // Get the file extension
    const language = hljs.getLanguage(fileExtension) ? fileExtension : 'plaintext'; // Detect language

    const highlightedCode = hljs.highlight(language, fileContent).value; // Apply the detected language

    // Check if the request is from curl (i.e., it's asking for only code content, not HTML)
    if (req.headers['user-agent'] && req.headers['user-agent'].includes('curl')) {
      // If it's a curl request, just send the raw highlighted code content (without HTML)
      res.type('text/plain').send(fileContent); // This sends the raw code (no HTML)
    } else {
      // For browser requests, return the full HTML with highlighted code
      res.send(`
        <!DOCTYPE html>
        <html lang="en">
        <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>${req.params.file}</title>
          <style>
            body {
              background-color: #161616;
              color: white;
              font-family: monospace;
              padding: 20px;
            }

            pre {
              background-color: #080808;
              color: white;
              padding: 20px;
              overflow: auto;
              border: none;
            }

            code {
              font-size: 16px;
              white-space: pre-wrap;
            }

            .hljs {
              background-color: #080808;
              color: #f8f8f2;
            }

            /* Highlighting for general elements */
            .hljs-tag {
              color: #e06c75;
            }

            .hljs-attribute {
              color: #56b6c2;
            }

            .hljs-doctag {
              color: #98c379;
            }

            .hljs-string {
              color: #98c379;
            }

            .hljs-comment {
              color: #7f8c8d;
            }

            .hljs-keyword {
              color: #c678dd;
            }

            .hljs-variable {
              color: #d19a66;
            }

            .hljs-function {
              color: #61afef;
            }

            .hljs-number {
              color: #d19a66;
            }

            .hljs-selector-tag {
              color: #e06c75;
            }

            .hljs-title {
              color: #e5c07b;
            }

            .hljs-built_in {
              color: #56b6c2;
            }

            .hljs-class .hljs-title {
              color: #98c379;
            }

            .hljs-type {
              color: #c678dd;
            }

            .hljs-symbol {
              color: #d19a66;
            }

            .hljs-punctuation {
              color: #f8f8f2;
            }

            .hljs-section {
              color: #e5c07b;
            }

            .hljs-link {
              color: #61afef;
            }

            /* Styling for inline elements like bold/italic in text */
            .hljs-emphasis {
              font-style: italic;
            }

            .hljs-strong {
              font-weight: bold;
            }
          </style>
        </head>
        <body>
          <pre><code class="hljs">${highlightedCode}</code></pre>
        </body>
        </html>
      `);
    }
  } else {
    res.status(404).send('File not found');
  }
});

// Start the server
app.listen(port, () => {
  console.log(`Server is running at http://localhost:${port}`);
});