Versions
- Open: VersionChanges from v6 to v7+63-10⦚ 38 unchanged lines ⦚placeholder="Untitled"/>
<button onClick={() => toggleWrap(index)} className="wrap-toggle">{snippet.wrap ? '⇟' : '⇢'}</button></div><div className="snippet-content">⦚ 108 unchanged lines ⦚}.wrap-toggle {background: transparent;border: none;color: #e0e0e0;cursor: pointer;font-size: 14px;padding: 0;margin: 0;}⦚ 34 unchanged lines ⦚⦚ 38 unchanged lines ⦚placeholder="Untitled"/><div className="wrap-control"><span className="wrap-icon">↩</span><label className="toggle-switch"><inputtype="checkbox"checked={snippet.wrap}onChange={() => toggleWrap(index)}/><span className="toggle-slider"></span></label></div></div><div className="snippet-content">⦚ 108 unchanged lines ⦚}.wrap-control {display: flex;align-items: center;}.wrap-icon {margin-right: 5px;font-size: 14px;}.toggle-switch {position: relative;display: inline-block;width: 30px;height: 16px; - Open: VersionChanges from v5 to v6+8-40/** @jsxImportSource https://esm.sh/react */import React, { useState, useEffect } from "https://esm.sh/react";import { createRoot } from "https://esm.sh/react-dom/client";
import { Prism as SyntaxHighlighter } from 'https://esm.sh/react-syntax-highlighter';import { vscDarkPlus } from 'https://esm.sh/react-syntax-highlighter/dist/esm/styles/prism';function App() {⦚ 38 unchanged lines ⦚</div><div className="snippet-content"><SyntaxHighlighterlanguage="javascript"style={vscDarkPlus}className="syntax-highlighter"customStyle={{margin: 0,padding: '10px 10px 10px 0',height: '100%',boxSizing: 'border-box',whiteSpace: snippet.wrap ? 'pre-wrap' : 'pre',wordBreak: snippet.wrap ? 'break-all' : 'normal',background: 'transparent',position: 'absolute',left: 0,top: 0,pointerEvents: 'none',fontSize: '12px',lineHeight: '1.5',}}>{snippet.content}</SyntaxHighlighter><textareavalue={snippet.content}onChange={(e) => updateSnippet(index, e.target.value, 'content')}/** @jsxImportSource https://esm.sh/react */import React, { useState, useEffect } from "https://esm.sh/react";import { createRoot } from "https://esm.sh/react-dom/client";function App() {⦚ 38 unchanged lines ⦚</div><div className="snippet-content"><textareavalue={snippet.content}onChange={(e) => updateSnippet(index, e.target.value, 'content')}⦚ 3 unchanged lines ⦚autoCorrect="off"autoCapitalize="off"style={{whiteSpace: snippet.wrap ? 'pre-wrap' : 'pre'}}/></div>⦚ 108 unchanged lines ⦚.snippet-content {flex-grow: 1;position: relative;}.snippet-textarea {position: absolute;⦚ 4 unchanged lines ⦚border: none;background-color: transparent;color: #e0e0e0;resize: none;font-family: 'Fira Code', monospace;font-size: 12px; - Open: VersionChanges from v4 to v5+15-6⦚ 51 unchanged lines ⦚customStyle={{margin: 0,
padding: '10px',height: '100%',boxSizing: 'border-box',⦚ 5 unchanged lines ⦚top: 0,pointerEvents: 'none',}}>⦚ 125 unchanged lines ⦚}.snippet-textarea {position: absolute;top: 0;⦚ 9 unchanged lines ⦚font-size: 12px;line-height: 1.5;padding: 10px;box-sizing: border-box;z-index: 1;}.syntax-highlighter {z-index: 0;}⦚ 7 unchanged lines ⦚⦚ 51 unchanged lines ⦚customStyle={{margin: 0,padding: '10px 10px 10px 0',height: '100%',boxSizing: 'border-box',⦚ 5 unchanged lines ⦚top: 0,pointerEvents: 'none',fontSize: '12px',lineHeight: '1.5',}}>⦚ 125 unchanged lines ⦚}.syntax-highlighter {z-index: 0;}.syntax-highlighter code {font-family: 'Fira Code', monospace !important;}.snippet-textarea {position: absolute;top: 0;⦚ 9 unchanged lines ⦚font-size: 12px;line-height: 1.5;padding: 10px 10px 10px 40px;box-sizing: border-box;z-index: 1; - Open: VersionChanges from v3 to v4+13-6⦚ 48 unchanged lines ⦚language="javascript"style={vscDarkPlus}
customStyle={{margin: 0,padding: '10px',⦚ 3 unchanged lines ⦚wordBreak: snippet.wrap ? 'break-all' : 'normal',background: 'transparent',}}>{snippet.content}</SyntaxHighlighter><textareavalue={snippet.content}onChange={(e) => updateSnippet(index, e.target.value, 'content')}placeholder="Enter your code here"className="snippet-textarea"spellCheck="false"⦚ 114 unchanged lines ⦚position: relative;flex-grow: 1;}.snippet-textarea {⦚ 4 unchanged lines ⦚height: 100%;border: none;background: transparent;color: #e0e0e0;resize: none;font-family: 'Fira Code', monospace;font-size: 12px;⦚ 48 unchanged lines ⦚language="javascript"style={vscDarkPlus}className="syntax-highlighter"customStyle={{margin: 0,padding: '10px',⦚ 3 unchanged lines ⦚wordBreak: snippet.wrap ? 'break-all' : 'normal',background: 'transparent',position: 'absolute',left: 0,top: 0,pointerEvents: 'none',}}>{snippet.content}</SyntaxHighlighter><textareavalue={snippet.content}onChange={(e) => updateSnippet(index, e.target.value, 'content')}placeholder="// Enter your code here"className="snippet-textarea"spellCheck="false"⦚ 114 unchanged lines ⦚position: relative;flex-grow: 1;overflow: hidden;}.snippet-textarea {⦚ 4 unchanged lines ⦚height: 100%; - Open: VersionChanges from v2 to v3+31-27/** @jsxImportSource https://esm.sh/react */import React, { useState, useEffect } from "https://esm.sh/react";import { createRoot } from "https://esm.sh/react-dom/client";import { Prism as SyntaxHighlighter } from 'https://esm.sh/react-syntax-highlighter';
import { tomorrow } from 'https://esm.sh/react-syntax-highlighter/dist/esm/styles/prism';function App() {⦚ 21 unchanged lines ⦚return (<div className="app"><h1>Code Snippet Clipboard</h1><div className="grid">{snippets.map((snippet, index) => (⦚ 14 unchanged lines ⦚<SyntaxHighlighterlanguage="javascript"style={tomorrow}customStyle={{margin: 0,⦚ 35 unchanged lines ⦚<html><head><title>Code Snippet Clipboard</title><meta name="viewport" content="width=device-width, initial-scale=1"><link href="https://fonts.googleapis.com/css2?family=Fira+Code&display=swap" rel="stylesheet"><style>${css}</style></head>⦚ 15 unchanged lines ⦚body {margin: 0;font-family: 'Fira Code', monospace;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;/** @jsxImportSource https://esm.sh/react */import React, { useState, useEffect } from "https://esm.sh/react";import { createRoot } from "https://esm.sh/react-dom/client";import { Prism as SyntaxHighlighter } from 'https://esm.sh/react-syntax-highlighter';import { vscDarkPlus } from 'https://esm.sh/react-syntax-highlighter/dist/esm/styles/prism';function App() {⦚ 21 unchanged lines ⦚return (<div className="app"><h1>CodeShelf</h1><div className="grid">{snippets.map((snippet, index) => (⦚ 14 unchanged lines ⦚<SyntaxHighlighterlanguage="javascript"style={vscDarkPlus}customStyle={{margin: 0,⦚ 35 unchanged lines ⦚<html><head><title>CodeShelf</title><meta name="viewport" content="width=device-width, initial-scale=1"><link href="https://fonts.googleapis.com/css2?family=Fira+Code&family=Inter:wght@400;700&display=swap" rel="stylesheet"><style>${css}</style></head>⦚ 15 unchanged lines ⦚body {margin: 0;font-family: 'Inter', sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale; - Open: VersionChanges from v1 to v2+19-43/** @jsxImportSource https://esm.sh/react */import React, { useState, useEffect } from "https://esm.sh/react";import { createRoot } from "https://esm.sh/react-dom/client";import { Prism as SyntaxHighlighter } from 'https://esm.sh/react-syntax-highlighter';
import { atomDark } from 'https://esm.sh/react-syntax-highlighter/dist/esm/styles/prism';function App() {⦚ 40 unchanged lines ⦚<SyntaxHighlighterlanguage="javascript"style={atomDark}customStyle={{margin: 0,⦚ 3 unchanged lines ⦚whiteSpace: snippet.wrap ? 'pre-wrap' : 'pre',wordBreak: snippet.wrap ? 'break-all' : 'normal',}}>⦚ 13 unchanged lines ⦚))}</div><footer><a href={import.meta.url.replace("esm.town", "val.town")} target="_blank" rel="noopener noreferrer">View Source</a></footer></div>);⦚ 32 unchanged lines ⦚body {margin: 0;font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;background: linear-gradient(135deg, #1a1a2e, #16213e);/** @jsxImportSource https://esm.sh/react */import React, { useState, useEffect } from "https://esm.sh/react";import { createRoot } from "https://esm.sh/react-dom/client";import { Prism as SyntaxHighlighter } from 'https://esm.sh/react-syntax-highlighter';import { tomorrow } from 'https://esm.sh/react-syntax-highlighter/dist/esm/styles/prism';function App() {⦚ 40 unchanged lines ⦚<SyntaxHighlighterlanguage="javascript"style={tomorrow}customStyle={{margin: 0,⦚ 3 unchanged lines ⦚whiteSpace: snippet.wrap ? 'pre-wrap' : 'pre',wordBreak: snippet.wrap ? 'break-all' : 'normal',background: 'transparent',}}>⦚ 13 unchanged lines ⦚))}</div></div>);⦚ 32 unchanged lines ⦚body {margin: 0;font-family: 'Fira Code', monospace;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;background-color: #ffffff;background-image: radial-gradient(#000000 1px, transparent 1px);background-size: 20px 20px; - Open: VersionChanges from v0 to v1+95-33/** @jsxImportSource https://esm.sh/react */import React, { useState, useEffect } from "https://esm.sh/react";import { createRoot } from "https://esm.sh/react-dom/client";import { Prism as SyntaxHighlighter } from 'https://esm.sh/react-syntax-highlighter';
import { vscDarkPlus } from 'https://esm.sh/react-syntax-highlighter/dist/esm/styles/prism';function App() {const [snippets, setSnippets] = useState(Array(6).fill('// Your code here'));useEffect(() => {⦚ 4 unchanged lines ⦚}, []);const updateSnippet = (index, newValue) => {const updatedSnippets = [...snippets];updatedSnippets[index] = newValue;setSnippets(updatedSnippets);localStorage.setItem('codeSnippets', JSON.stringify(updatedSnippets));};return (<div className="app"><h1>Code Snippet Grid</h1><div className="grid">{snippets.map((snippet, index) => (<div key={index} className="snippet-container"><SyntaxHighlighterlanguage="javascript"style={vscDarkPlus}customStyle={{margin: 0,padding: '10px',borderRadius: '8px',height: '100%',boxSizing: 'border-box',/** @jsxImportSource https://esm.sh/react */import React, { useState, useEffect } from "https://esm.sh/react";import { createRoot } from "https://esm.sh/react-dom/client";import { Prism as SyntaxHighlighter } from 'https://esm.sh/react-syntax-highlighter';import { atomDark } from 'https://esm.sh/react-syntax-highlighter/dist/esm/styles/prism';function App() {const [snippets, setSnippets] = useState(Array(6).fill({ title: 'Untitled', content: '', wrap: false }));useEffect(() => {⦚ 4 unchanged lines ⦚}, []);const updateSnippet = (index, newValue, field) => {const updatedSnippets = snippets.map((snippet, i) =>i === index ? { ...snippet, [field]: newValue } : snippet);setSnippets(updatedSnippets);localStorage.setItem('codeSnippets', JSON.stringify(updatedSnippets));};const toggleWrap = (index) => {updateSnippet(index, !snippets[index].wrap, 'wrap');};return (<div className="app"><h1>Code Snippet Clipboard</h1><div className="grid">{snippets.map((snippet, index) => (<div key={index} className="snippet-container"><div className="snippet-titlebar"><inputtype="text"value={snippet.title} - Open: Version+173-0/** @jsxImportSource https://esm.sh/react */import React, { useState, useEffect } from "https://esm.sh/react";import { createRoot } from "https://esm.sh/react-dom/client";import { Prism as SyntaxHighlighter } from 'https://esm.sh/react-syntax-highlighter';import { vscDarkPlus } from 'https://esm.sh/react-syntax-highlighter/dist/esm/styles/prism';function App() {const [snippets, setSnippets] = useState(Array(6).fill('// Your code here'));useEffect(() => {const storedSnippets = localStorage.getItem('codeSnippets');if (storedSnippets) {setSnippets(JSON.parse(storedSnippets));}}, []);const updateSnippet = (index, newValue) => {const updatedSnippets = [...snippets];updatedSnippets[index] = newValue;setSnippets(updatedSnippets);localStorage.setItem('codeSnippets', JSON.stringify(updatedSnippets));};return (<div className="app"><h1>Code Snippet Grid</h1><div className="grid">{snippets.map((snippet, index) => (<div key={index} className="snippet-container"><SyntaxHighlighterlanguage="javascript"style={vscDarkPlus}customStyle={{margin: 0,padding: '10px',borderRadius: '8px',
janu-codeshelf.web.val.run
Updated: October 1, 2024