diff --git a/packages/app/src/components/commons/Markdown.tsx b/packages/app/src/components/commons/Markdown.tsx index 3919d6c5..2226c18d 100644 --- a/packages/app/src/components/commons/Markdown.tsx +++ b/packages/app/src/components/commons/Markdown.tsx @@ -1,7 +1,7 @@ import ReactMarkdown from "markdown-to-jsx" import { List, ListItem, Typography } from "@mui/material" import Link from "@mui/material/Link" -import { palette, typography } from "../../theme" +import { typography } from "../../theme" const options = { overrides: { @@ -50,13 +50,26 @@ const options = { props: { gutterBottom: true, paragraph: true }, }, a: { component: Link }, + ol: { + component: List, + dense: true, + props: { + sx: { + mb: 2, + pl: 2, + "& li": { + listStyleType: "decimal" + } + }, + }, + }, ul: { component: List, dense: true, props: { sx: { mb: 2, - pl: 0, + pl: 2, }, }, }, @@ -65,27 +78,13 @@ const options = { props: { sx: { display: "list-item", - listStylePosition: "inside", + listStylePosition: "outside", listStyleType: "circle", pl: 0, py: "0.25rem", }, }, }, - pre: { - props: { - style: { - background: palette.grays[800], - borderRadius: 4, - color: palette.whites[1000], - fontFamily: typography.fontFamilies.monospace, - marginBottom: "1rem", - overflow: "auto", - paddingBottom: "1rem", - paddingTop: "1rem", - }, - }, - }, }, } diff --git a/packages/app/src/components/views/publication/ArticleView.tsx b/packages/app/src/components/views/publication/ArticleView.tsx index 263d1d6a..54f814bb 100644 --- a/packages/app/src/components/views/publication/ArticleView.tsx +++ b/packages/app/src/components/views/publication/ArticleView.tsx @@ -120,7 +120,7 @@ export const ArticleView: React.FC = ({ updateChainId }) => { ))} )} - + {articleToShow} diff --git a/packages/app/src/theme/index.ts b/packages/app/src/theme/index.ts index de8db8f3..577d44a8 100644 --- a/packages/app/src/theme/index.ts +++ b/packages/app/src/theme/index.ts @@ -177,6 +177,20 @@ let theme = createTheme({ em { font-style: italic; } + blockquote { + padding: 0 1rem; + border-left: 2px solid ${palette.grays[200]}; + color: ${palette.grays[800]}; + } + pre, :not(pre) > code { + background-color: ${palette.grays[800]}; + border-radius: 4px; + color: ${palette.whites[1000]}; + font-family: ${typography.fontFamilies.monospace}; + margin-bottom: 1rem; + overflow: auto; + padding: 1rem; + } `, }, },