2b:null 2c:["$","title",null,{"children":"Convert Claude JSON to Markdown | Zellyn Hunter | Observable"}] 31:[] 2f:{"id":"e6fdea03ae80a6d2","slug":null,"title":"Convert Claude JSON to Markdown","thumbnail":"2582bcbbd76934c5bb838e2e6e60f4fef4d8e32979630470e8b04ea4d4293cfc","access_level":"public","create_time":"$D2024-09-03T20:55:44.702Z","update_time":"$D2024-09-03T20:57:16.625Z","view_time":null,"first_public_time":"$D2024-09-03T20:55:44.702Z","has_unpublished_edits":null,"fork":{"id":"1869620979c780ec","slug":"convert-claude-json-to-markdown","title":"Convert Claude JSON to Markdown","owner":{"id":"3b974c2db4452cfc","login":"simonw","name":"Simon Willison"}},"stars":0,"starred":false,"owner":{"type":"team","id":"d796a03c5877d3c8","login":"zellyn","name":"Zellyn Hunter","avatar_url":"https://avatars-next.observableusercontent.com/350abf8f2766fa17f37644f22ed99fb3aa7c6c5fd47a606cf3678752e007124a","tier":"starter_2024"},"version":77,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"12133cdd10fe21a6","login":"zellyn","name":"Zellyn Hunter","avatar_url":"https://avatars-next.observableusercontent.com/350abf8f2766fa17f37644f22ed99fb3aa7c6c5fd47a606cf3678752e007124a","tier":null}],"members":[{"type":"individual","id":"12133cdd10fe21a6","login":"zellyn","name":"Zellyn Hunter","avatar_url":"https://avatars-next.observableusercontent.com/350abf8f2766fa17f37644f22ed99fb3aa7c6c5fd47a606cf3678752e007124a","tier":null,"role":"editor"},{"type":"team","id":"d796a03c5877d3c8","login":"zellyn","name":"Zellyn Hunter","avatar_url":"https://avatars-next.observableusercontent.com/350abf8f2766fa17f37644f22ed99fb3aa7c6c5fd47a606cf3678752e007124a","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Convert Claude JSON to Markdown","cells":[{"id":0,"value":"# Convert Claude JSON to Markdown\n\n> **Note:** modified by Zellyn to wrap the (already bold) names in `` to make them easier to notice.\n\nTo use this tool, open a conversation in the Claude web interface while running your browser DevTools. Then, in the network panel, filter fetched URLs by `chat_conversations/` - right click on the matching URL and select \"copy response\" to get the JSON, then paste it in the box.\n\n $\"Animated$ \n\n[Background on this project](https://simonwillison.net/2024/Aug/8/convert-claude-json-to-markdown/) from my blog.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"viewof input = Inputs.textarea({ label: \"Paste in Claude JSON\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"html`${\n (markdown &&\n '

Markdown conversion

\") ||\n \"\"\n}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"md`${markdown}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"parsed = {\n try {\n return JSON.parse(input);\n } catch {\n return {};\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"markdown = {\n if (!parsed.chat_messages) {\n return \"\";\n }\n const bits = [];\n bits.push(`# ${parsed.name}`);\n parsed.chat_messages.forEach((message) => {\n bits.push(\n `**${message.sender}** (${new Date(message.created_at).toLocaleString(\n \"en-US\",\n {\n month: \"short\",\n day: \"numeric\",\n year: \"numeric\",\n hour: \"2-digit\",\n minute: \"2-digit\"\n }\n )})`\n );\n bits.push(\n replaceArtifactTags(message.text.replace(/<\\/antArtifact>/g, \"\\n```\"))\n );\n });\n return bits.join(\"\\n\\n\");\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"function escapeHtml(str) {\n return str.replace(/[&<>\"']/g, function (match) {\n const entityMap = {\n \"&\": \"&\",\n \"<\": \"<\",\n \">\": \">\",\n '\"': \""\",\n \"'\": \"'\"\n };\n return entityMap[match];\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"function replaceArtifactTags(input) {\n // Regular expression to match tags\n const regex = /]*>/g;\n\n // Function to extract attributes from a tag string\n function extractAttributes(tag) {\n const attributes = {};\n const attrRegex = /(\\w+)=(\"([^\"]*)\"|'([^']*)')/g;\n let match;\n while ((match = attrRegex.exec(tag)) !== null) {\n const key = match[1];\n const value = match[3] || match[4]; // Use either double or single quotes\n attributes[key] = value;\n }\n return attributes;\n }\n\n return input.replace(regex, (match) => {\n const attributes = extractAttributes(match);\n const typeLookup = {\n \"application/vnd.ant.react\": \"jsx\",\n \"text/html\": \"html\"\n };\n // Determine language based on 'language' attribute, otherwise fallback logic\n const lang = attributes.language || typeLookup[attributes.type] || \"\";\n\n // Return the Markdown formatted string\n return `### ${attributes.title || \"Untitled\"}\\n\\n\\`\\`\\`${lang}`;\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 30:"$2f:body"