import React from 'react'; import { View } from 'react-native'; import { CustomBlockRenderer } from 'react-nat

import React from 'react'; import { View } from 'react-native'; import { CustomBlockRenderer } from 'react-native-render-html'; import SyntaxHighlighter from 'react-native-syntax-highlighter'; import { my2 } from '@republic/foundation/styles'; // 웹과 동일하게 스타일 맞춰줌 // FIXME 스타일 적용이 제대로 안되고 있어서 수동으로 적용함 const styleDracula = { hljs: { display: 'block', overflowX: 'auto', padding: '0.5em', background: '#282a36', color: '#f8f8f2', borderRadius: '0.5em', }, 'hljs-keyword': { color: '#8be9fd', fontWeight: 'bold', }, 'hljs-selector-tag': { color: '#8be9fd', fontWeight: 'bold', }, 'hljs-literal': { color: '#8be9fd', fontWeight: 'bold', }, 'hljs-section': { color: '#8be9fd', fontWeight: 'bold', }, 'hljs-link': { color: '#8be9fd', }, 'hljs-function .hljs-keyword': { color: '#ff79c6', }, 'hljs-subst': { color: '#f8f8f2', }, 'hljs-string': { color: '#f1fa8c', }, 'hljs-title': { color: '#f1fa8c', fontWeight: 'bold', }, 'hljs-name': { color: '#f1fa8c', fontWeight: 'bold', }, 'hljs-type': { color: '#f1fa8c', fontWeight: 'bold', }, 'hljs-attribute': { color: '#f1fa8c', }, 'hljs-symbol': { color: '#f1fa8c', }, 'hljs-bullet': { color: '#f1fa8c', }, 'hljs-addition': { color: '#f1fa8c', }, 'hljs-variable': { color: '#f1fa8c', }, 'hljs-template-tag': { color: '#f1fa8c', }, 'hljs-template-variable': { color: '#f1fa8c', }, 'hljs-comment': { color: '#6272a4', }, 'hljs-quote': { color: '#6272a4', }, 'hljs-deletion': { color: '#6272a4', }, 'hljs-meta': { color: '#6272a4', }, 'hljs-doctag': { fontWeight: 'bold', }, 'hljs-strong': { fontWeight: 'bold', }, 'hljs-emphasis': { fontStyle: 'italic', }, // default styles // careerly-web/src/foundation/styles/editor.css 'hljs-tag': { color: '#f98181', }, 'hljs-regexp': { color: '#f98181', }, 'hljs-selector-id': { color: '#f98181', }, 'hljs-selector-class': { color: '#f98181', }, 'hljs-number': { color: '#fbbc88', }, 'hljs-built_in': { color: '#fbbc88', }, 'hljs-builtin-name': { color: '#fbbc88', }, 'hljs-params': { color: '#fbbc88', }, }; const CustomCodeBlockRenderer: CustomBlockRenderer = ({ tnode }) => { const preNode = tnode.children?.[0]; if (!preNode) { return null; } const codeBlockNode = tnode.children?.[0]?.children?.[0]; const isCodeBlockNode = codeBlockNode?.tagName === 'code' && codeBlockNode?.type === 'text'; if (!isCodeBlockNode) { return null; } const rawLanguage = codeBlockNode.classes?.[0]; const language = rawLanguage?.split('-')[1] ?? 'plaintext'; const code = codeBlockNode.data ?? ''; return ( {code} ); }; export default CustomCodeBlockRenderer;