diff options
Diffstat (limited to 'extension/react-app/src/components')
| -rw-r--r-- | extension/react-app/src/components/CodeBlock.tsx | 1 | ||||
| -rw-r--r-- | extension/react-app/src/components/StepContainer.tsx | 23 |
2 files changed, 23 insertions, 1 deletions
diff --git a/extension/react-app/src/components/CodeBlock.tsx b/extension/react-app/src/components/CodeBlock.tsx index e0336554..eedae3fb 100644 --- a/extension/react-app/src/components/CodeBlock.tsx +++ b/extension/react-app/src/components/CodeBlock.tsx @@ -11,6 +11,7 @@ const StyledPre = styled.pre` border: 1px solid gray; border-radius: ${defaultBorderRadius}; background-color: ${vscBackground}; + padding: 8px; `; const StyledCode = styled.code` diff --git a/extension/react-app/src/components/StepContainer.tsx b/extension/react-app/src/components/StepContainer.tsx index 8ea54325..fb0143b5 100644 --- a/extension/react-app/src/components/StepContainer.tsx +++ b/extension/react-app/src/components/StepContainer.tsx @@ -84,6 +84,15 @@ const OnHoverDiv = styled.div` animation: ${appear} 0.3s ease-in-out; `; +const MarkdownPre = styled.pre` + background-color: ${secondaryDark}; + padding: 10px; + border-radius: ${defaultBorderRadius}; + border: 0.5px solid white; +`; + +const MarkdownCode = styled.code``; + function StepContainer(props: StepContainerProps) { const [open, setOpen] = useState( typeof props.open === "undefined" ? true : props.open @@ -182,7 +191,19 @@ function StepContainer(props: StepContainerProps) { {props.historyNode.observation.error as string} </pre> ) : ( - <ReactMarkdown key={1} className="overflow-scroll"> + <ReactMarkdown + key={1} + className="overflow-scroll" + components={{ + pre: ({ node, ...props }) => { + return ( + <CodeBlock + children={props.children[0] as string} + ></CodeBlock> + ); + }, + }} + > {props.historyNode.step.description as any} </ReactMarkdown> )} |