Hugging Face's logo

Spaces:
gradio
/
dataframe-sandbox
Running

App Files Community
1
dataframe-sandbox
File size: 2,662 Bytes
951c359
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
 
<script lang="ts">
  import { onMount } from 'svelte';
  import Prism from 'prismjs';
  
  // Import the languages we need
  import 'prismjs/components/prism-typescript';
  import 'prismjs/components/prism-javascript';
  import 'prismjs/components/prism-json';
  
  // Import the theme CSS
  import 'prismjs/themes/prism-tomorrow.css';

  export let code: string;
  export let language: string = 'typescript';
  export let class_name: string = '';

  let highlightedCode = '';

  onMount(() => {
    try {
      highlightedCode = Prism.highlight(code, Prism.languages[language] || Prism.languages.typescript, language);
    } catch (error) {
      console.warn('Syntax highlighting failed:', error);
      highlightedCode = code;
    }
  });

  $: if (code) {
    try {
      highlightedCode = Prism.highlight(code, Prism.languages[language] || Prism.languages.typescript, language);
    } catch (error) {
      console.warn('Syntax highlighting failed:', error);
      highlightedCode = code;
    }
  }
</script>

<div class="syntax-highlighter {class_name}">
  <pre class="language-{language}"><code class="language-{language}">{@html highlightedCode}</code></pre>
</div>

<style>
  .syntax-highlighter {
    border-radius: 0.75rem;
    overflow-x: auto;
  }
  
  .syntax-highlighter pre {
    margin: 0;
    padding: 1.5rem;
    font-size: 0.875rem;
    line-height: 1.625;
    background-color: #1e293b;
    border: 1px solid #334155;
    font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
  }
  
  .syntax-highlighter code {
    color: #e2e8f0;
    font-family: inherit;
  }

  /* Custom syntax highlighting colors */
  :global(.syntax-highlighter .token.comment) {
    color: #64748b;
  }
  
  :global(.syntax-highlighter .token.string) {
    color: #10b981;
  }
  
  :global(.syntax-highlighter .token.number) {
    color: #f59e0b;
  }
  
  :global(.syntax-highlighter .token.keyword) {
    color: #8b5cf6;
  }
  
  :global(.syntax-highlighter .token.function) {
    color: #06b6d4;
  }
  
  :global(.syntax-highlighter .token.operator) {
    color: #e2e8f0;
  }
  
  :global(.syntax-highlighter .token.punctuation) {
    color: #94a3b8;
  }
  
  :global(.syntax-highlighter .token.property) {
    color: #f472b6;
  }
  
  :global(.syntax-highlighter .token.boolean) {
    color: #f59e0b;
  }
  
  :global(.syntax-highlighter .token.class-name) {
    color: #06b6d4;
  }
  
  :global(.syntax-highlighter .token.tag) {
    color: #8b5cf6;
  }
  
  :global(.syntax-highlighter .token.attr-name) {
    color: #f472b6;
  }
  
  :global(.syntax-highlighter .token.attr-value) {
    color: #10b981;
  }
</style>