From 78d58c6a61bf58a4316ad7465b7e72eba85c5492 Mon Sep 17 00:00:00 2001 From: Youngteac Hong Date: Thu, 4 May 2023 18:20:46 +0900 Subject: [PATCH 1/2] Fix broken links and adjust calendar height --- src/components/NavBar/AccountMenu.tsx | 8 ++++---- src/components/calendar/BasicCalendar.tsx | 2 +- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/NavBar/AccountMenu.tsx b/src/components/NavBar/AccountMenu.tsx index 0ed8aa90..38775957 100644 --- a/src/components/NavBar/AccountMenu.tsx +++ b/src/components/NavBar/AccountMenu.tsx @@ -97,19 +97,19 @@ function AccountMenu() { - navigate('https://github.com/yorkie-team/yorkie')}> + window.open('https://github.com/yorkie-team/yorkie')}> - navigate('https://github.com/yorkie-team/yorkie-js-sdk')}> + window.open('https://github.com/yorkie-team/yorkie-js-sdk')}> - + - navigate('https://github.com/yorkie-team/codepair')}> + window.open('https://github.com/yorkie-team/codepair')}> diff --git a/src/components/calendar/BasicCalendar.tsx b/src/components/calendar/BasicCalendar.tsx index 01f84e0f..dc08095c 100644 --- a/src/components/calendar/BasicCalendar.tsx +++ b/src/components/calendar/BasicCalendar.tsx @@ -21,7 +21,7 @@ const useStyles = makeStyles()((theme) => ({ marginTop: 0, }, '& .MuiPickersSlideTransition-root': { - minHeight: 250, + minHeight: 260, }, }, day: { From af540e87ee661f3cd0ddd9200e703c70187191b4 Mon Sep 17 00:00:00 2001 From: easylogic Date: Tue, 9 May 2023 01:38:35 +0900 Subject: [PATCH 2/2] split MarkdownRenderer --- src/components/Editor/index.tsx | 6 +- .../mime/text/md/CodeEditor/ChartView.tsx | 68 ++-------- .../text/md/CodeEditor/EditorSettings.tsx | 3 +- .../text/md/CodeEditor/MarkdownRenderer.tsx | 116 ++++++++++++++++++ .../Editor/mime/text/md/CodeEditor/index.tsx | 102 +-------------- src/components/NavBar/LinkNavigation.tsx | 4 +- src/components/NavBar/PageButton.tsx | 2 +- src/components/NavBar/SubPageButton.tsx | 3 +- .../SideBar/CustomViewer/CalendarListItem.tsx | 2 +- .../SideBar/CustomViewer/CalendarView.tsx | 5 +- .../SideBar/CustomViewer/HeadingItem.tsx | 3 +- .../SideBar/CustomViewer/PagesView.tsx | 12 +- .../SideBar/CustomViewer/SidebarItem.tsx | 4 +- src/components/SideBar/index.tsx | 5 +- src/components/application/LogoMenu.tsx | 21 ++-- src/components/commons/Fade.tsx | 2 +- src/components/commons/Guide.tsx | 2 +- src/index.scss | 4 +- 18 files changed, 177 insertions(+), 187 deletions(-) create mode 100644 src/components/Editor/mime/text/md/CodeEditor/MarkdownRenderer.tsx diff --git a/src/components/Editor/index.tsx b/src/components/Editor/index.tsx index 17dc8aa6..bef215bb 100644 --- a/src/components/Editor/index.tsx +++ b/src/components/Editor/index.tsx @@ -20,7 +20,11 @@ import { } from 'features/docSlices'; import { makeStyles } from 'styles/common'; import { Presence, syncPeer } from 'features/peerSlices'; -import { Alert, Box, CircularProgress, Snackbar } from '@mui/material'; +import Alert from '@mui/material/Alert'; +import Box from '@mui/material/Box'; +import CircularProgress from '@mui/material/CircularProgress'; +import Snackbar from '@mui/material/Snackbar'; + import WhiteBoardEditor from './mime/application/whiteboard/Editor'; import Editor from './mime/text/md/Editor'; diff --git a/src/components/Editor/mime/text/md/CodeEditor/ChartView.tsx b/src/components/Editor/mime/text/md/CodeEditor/ChartView.tsx index 02f01af7..9e738bd9 100644 --- a/src/components/Editor/mime/text/md/CodeEditor/ChartView.tsx +++ b/src/components/Editor/mime/text/md/CodeEditor/ChartView.tsx @@ -1,21 +1,15 @@ -import React, { useId, useLayoutEffect, useMemo, useState } from 'react'; -import mermaid from 'mermaid'; +import React, { useId, useMemo } from 'react'; import { makeStyles } from 'styles/common'; import { Theme } from 'features/settingSlices'; -import { TabContext, TabList, TabPanel } from '@mui/lab'; -import { Box, Tab, ThemeProvider, createTheme } from '@mui/material'; -import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'; - -import oneLight from 'react-syntax-highlighter/dist/esm/styles/prism/one-light'; -import oneDark from 'react-syntax-highlighter/dist/esm/styles/prism/one-dark'; +import { ThemeProvider, createTheme } from '@mui/material'; const useStyles = makeStyles<{ theme: string }>()((_, { theme }) => { return { root: { - backgroundColor: theme === Theme.Dark ? '#282c34' : '#fff', - borderRadius: 8, + backgroundColor: theme === Theme.Dark ? '#282c34' : '#f6f6f6', + // borderRadius: 8, padding: 8, - border: theme === Theme.Dark ? '1px solid #555555' : '1px solid rgba(0, 0, 0, 0.12)', + // border: theme === Theme.Dark ? '1px solid #555555' : '1px solid rgba(0, 0, 0, 0.12)', }, }; }); @@ -25,7 +19,7 @@ function ChartView({ code, theme }: { code: string; theme: string }) { const { classes } = useStyles({ theme, }); - const [value, setValue] = useState('viewer'); + const themeValue = useMemo( () => createTheme({ @@ -36,57 +30,13 @@ function ChartView({ code, theme }: { code: string; theme: string }) { [theme], ); - const handleChange = (event: React.SyntheticEvent, newValue: string) => { - setValue(newValue); - }; - - useLayoutEffect(() => { - mermaid.initialize({ - startOnLoad: false, - theme, - }); - - if (value === 'code') return; - - (async () => { - const currentId = id.replaceAll(':', 'mermaid'); - const element = document.querySelector(`#${currentId}`); - - if (element) { - const graphDefinition = code.trim(); - - const { svg } = await mermaid.render(`${currentId}svg`, graphDefinition, element); - - element.innerHTML = svg; - } - })(); - }, [code, theme, id, value]); - /* eslint-disable react/no-danger */ return (
- - - - - - - - -
fdsafdsf
- - - - {code} - - - +
+ 
{code}
+
); diff --git a/src/components/Editor/mime/text/md/CodeEditor/EditorSettings.tsx b/src/components/Editor/mime/text/md/CodeEditor/EditorSettings.tsx index 615a0c08..e8b193ef 100644 --- a/src/components/Editor/mime/text/md/CodeEditor/EditorSettings.tsx +++ b/src/components/Editor/mime/text/md/CodeEditor/EditorSettings.tsx @@ -8,7 +8,8 @@ import { CodeKeyMap, TabSize, setCodeKeyMap, setTabSize } from 'features/setting import { AppDispatch } from 'app/store'; import { AppState } from 'app/rootReducer'; import { makeStyles } from 'styles/common'; -import { FormControl, NativeSelect } from '@mui/material'; +import FormControl from '@mui/material/FormControl'; +import NativeSelect from '@mui/material/NativeSelect'; const useStyles = makeStyles()((theme) => ({ root: { diff --git a/src/components/Editor/mime/text/md/CodeEditor/MarkdownRenderer.tsx b/src/components/Editor/mime/text/md/CodeEditor/MarkdownRenderer.tsx new file mode 100644 index 00000000..39950b21 --- /dev/null +++ b/src/components/Editor/mime/text/md/CodeEditor/MarkdownRenderer.tsx @@ -0,0 +1,116 @@ +import React from 'react'; + +import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'; +import { Theme } from 'features/settingSlices'; +import oneLight from 'react-syntax-highlighter/dist/esm/styles/prism/one-light'; +import oneDark from 'react-syntax-highlighter/dist/esm/styles/prism/one-dark'; + +import ReactMarkdown from 'react-markdown'; +import remarkGfm from 'remark-gfm'; +import remarkMath from 'remark-math'; +import remarkToc from 'remark-toc'; +import remarkEmoji from 'remark-emoji'; + +import rehypeKatex from 'rehype-katex'; +import fenceparser from 'fenceparser'; +import { MetaInfo } from 'constants/editor'; +import MermaidView from './MermaidView'; +import MiniDraw from './MiniDraw'; + +import ChartView from './ChartView'; + +interface MarkdownRendererProps { + theme: string; + markdown: string; +} + +type StyleObject = { + [key: string]: string; +}; + +export function MarkdownRenderer({ theme, markdown }: MarkdownRendererProps) { + return ( +
+ { + const match = /language-(\w+)/.exec(className || ''); + + const text = children[0]; + + const tempMetaInfo = fenceparser(`${node.data?.meta}`); + + const metaInfo: MetaInfo = {}; + Object.keys(tempMetaInfo).reduce((acc: any, key) => { + if (!key || key === 'undefined') { + return acc; + } + + acc[key] = tempMetaInfo[key]; + + return acc; + }, metaInfo); + + if (className === 'language-chart') { + return ; + } + + if (className === 'language-mermaid') { + return ; + } + + if (className === 'language-tldraw') { + return ; + } + + return !inline && match ? ( + { + console.log(lineNumber, metaInfo.highlight); + const style: StyleObject = { display: 'block' }; + + // check line numbers + const hasHighlightedLineNumbers = Object.keys(metaInfo.highlight as any).some((key) => { + const lines = key.split('-'); + + if (lines.length === 1) { + if (key === `${lineNumber}`) { + return true; + } + } else if (lineNumber >= Number(lines[0]) && lineNumber <= Number(lines[1])) { + return true; + } + return false; + }); + if (hasHighlightedLineNumbers) { + style.backgroundColor = '#ffe7a4'; + } + return { style }; + }} + PreTag="div" + > + {String(children).replace(/\n$/, '')} + + ) : ( + + {children} + + ); + }, + }} + > + {markdown} + +
+ ); +} diff --git a/src/components/Editor/mime/text/md/CodeEditor/index.tsx b/src/components/Editor/mime/text/md/CodeEditor/index.tsx index bd4aa164..b3ae5ddb 100644 --- a/src/components/Editor/mime/text/md/CodeEditor/index.tsx +++ b/src/components/Editor/mime/text/md/CodeEditor/index.tsx @@ -9,11 +9,6 @@ import { ActorID, DocEvent, TextChange } from 'yorkie-js-sdk'; import CodeMirror from 'codemirror'; import SimpleMDE from 'easymde'; import SimpleMDEReact from 'react-simplemde-editor'; -import ReactMarkdown from 'react-markdown'; -import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'; - -import oneLight from 'react-syntax-highlighter/dist/esm/styles/prism/one-light'; -import oneDark from 'react-syntax-highlighter/dist/esm/styles/prism/one-dark'; import { AppState } from 'app/rootReducer'; import { ConnectionStatus, Presence } from 'features/peerSlices'; @@ -32,17 +27,10 @@ import { Theme, Typography, } from '@mui/material'; -import { MetaInfo, NAVBAR_HEIGHT } from 'constants/editor'; +import { NAVBAR_HEIGHT } from 'constants/editor'; import { addRecentPage } from 'features/currentSlices'; import { setActionStatus } from 'features/actionSlices'; import { updateLinkNameWithHeading } from 'features/linkSlices'; -import remarkMath from 'remark-math'; -import remarkGfm from 'remark-gfm'; -import remarkToc from 'remark-toc'; -import remarkEmoji from 'remark-emoji'; - -import rehypeKatex from 'rehype-katex'; -import fenceparser from 'fenceparser'; import 'katex/dist/katex.min.css'; // `rehype-katex` does not import the CSS for you import 'easymde/dist/easymde.min.css'; @@ -65,14 +53,10 @@ import Cursor from './Cursor'; import SlideView from './slideView'; import { CodeEditorMenu } from './Menu'; -import MermaidView from './MermaidView'; import MiniDraw from './MiniDraw'; import MiniMermaid from './MiniMermaid'; import { MermaidSampleType, samples } from './mermaid-samples'; - -type StyleObject = { - [key: string]: string; -}; +import { MarkdownRenderer } from './MarkdownRenderer'; const WIDGET_HEIGHT = 40; @@ -544,87 +528,7 @@ export default function CodeEditor() { globalContainer.rootElement = createRoot(previewElement) as any; } - (globalContainer.rootElement as any)?.render( - { - const match = /language-(\w+)/.exec(className || ''); - - const text = children[0]; - - const tempMetaInfo = fenceparser(`${node.data?.meta}`); - - const metaInfo: MetaInfo = {}; - Object.keys(tempMetaInfo).reduce((acc: any, key) => { - if (!key || key === 'undefined') { - return acc; - } - - acc[key] = tempMetaInfo[key]; - - return acc; - }, metaInfo); - - // if (className === 'language-chart') { - // return ; - // } - - if (className === 'language-mermaid') { - return ; - } - - if (className === 'language-tldraw') { - return ; - } - - return !inline && match ? ( - { - console.log(lineNumber, metaInfo.highlight); - const style: StyleObject = { display: 'block' }; - - // check line numbers - const hasHighlightedLineNumbers = Object.keys(metaInfo.highlight as any).some((key) => { - const lines = key.split('-'); - - if (lines.length === 1) { - if (key === `${lineNumber}`) { - return true; - } - } else if (lineNumber >= Number(lines[0]) && lineNumber <= Number(lines[1])) { - return true; - } - return false; - }); - if (hasHighlightedLineNumbers) { - style.backgroundColor = '#ffe7a4'; - } - return { style }; - }} - PreTag="div" - > - {String(children).replace(/\n$/, '')} - - ) : ( - - {children} - - ); - }, - }} - > - {markdown} - , - ); + (globalContainer.rootElement as any)?.render(); } catch (err) { console.error(err); } diff --git a/src/components/NavBar/LinkNavigation.tsx b/src/components/NavBar/LinkNavigation.tsx index 64571a54..82e999cd 100644 --- a/src/components/NavBar/LinkNavigation.tsx +++ b/src/components/NavBar/LinkNavigation.tsx @@ -21,7 +21,9 @@ import Home from '@mui/icons-material/Home'; import { MimeType } from 'constants/editor'; import BorderAll from '@mui/icons-material/BorderAll'; import Gesture from '@mui/icons-material/Gesture'; -import { AccountTree, DescriptionOutlined, Folder } from '@mui/icons-material'; +import AccountTree from '@mui/icons-material/AccountTree'; +import DescriptionOutlined from '@mui/icons-material/DescriptionOutlined'; +import Folder from '@mui/icons-material/Folder'; import { Theme } from 'features/settingSlices'; import MoreHoriz from '@mui/icons-material/MoreHoriz'; diff --git a/src/components/NavBar/PageButton.tsx b/src/components/NavBar/PageButton.tsx index 67748a16..056ca91b 100644 --- a/src/components/NavBar/PageButton.tsx +++ b/src/components/NavBar/PageButton.tsx @@ -11,7 +11,7 @@ import { makeStyles } from 'styles/common'; import { MimeType } from 'constants/editor'; import { useNavigate } from 'react-router-dom'; import { createDocumentKey, createRandomColor } from 'utils/document'; -import { DescriptionOutlined } from '@mui/icons-material'; +import DescriptionOutlined from '@mui/icons-material/DescriptionOutlined'; const useStyles = makeStyles()(() => ({ menu: { diff --git a/src/components/NavBar/SubPageButton.tsx b/src/components/NavBar/SubPageButton.tsx index 8f3302ff..44ba69a8 100644 --- a/src/components/NavBar/SubPageButton.tsx +++ b/src/components/NavBar/SubPageButton.tsx @@ -1,5 +1,6 @@ import React, { useState } from 'react'; -import { ArrowDropDown, DescriptionOutlined } from '@mui/icons-material'; +import ArrowDropDown from '@mui/icons-material/ArrowDropDown'; +import DescriptionOutlined from '@mui/icons-material/DescriptionOutlined'; import { Button, List, ListItemButton, ListItemIcon, ListItemText, Popover } from '@mui/material'; import { findCurrentPageLink, LinkItemType } from 'features/linkSlices'; import { useSelector } from 'react-redux'; diff --git a/src/components/SideBar/CustomViewer/CalendarListItem.tsx b/src/components/SideBar/CustomViewer/CalendarListItem.tsx index ec8a5e3a..82d762b0 100644 --- a/src/components/SideBar/CustomViewer/CalendarListItem.tsx +++ b/src/components/SideBar/CustomViewer/CalendarListItem.tsx @@ -39,7 +39,7 @@ import dayjs from 'dayjs'; import relativeTime from 'dayjs/plugin/relativeTime'; import { addRecentPage } from 'features/currentSlices'; -import { DescriptionOutlined } from '@mui/icons-material'; +import DescriptionOutlined from '@mui/icons-material/DescriptionOutlined'; import { Theme } from 'features/settingSlices'; import { findColor } from 'utils/document'; diff --git a/src/components/SideBar/CustomViewer/CalendarView.tsx b/src/components/SideBar/CustomViewer/CalendarView.tsx index 1be2eed6..9cad5e8a 100644 --- a/src/components/SideBar/CustomViewer/CalendarView.tsx +++ b/src/components/SideBar/CustomViewer/CalendarView.tsx @@ -1,6 +1,7 @@ import React from 'react'; -import { TabPanel } from '@mui/lab'; -import { Box, List } from '@mui/material'; +import TabPanel from '@mui/lab/TabPanel'; +import Box from '@mui/material/Box'; +import List from '@mui/material/List'; import { useSelector } from 'react-redux'; import { AppState } from 'app/rootReducer'; diff --git a/src/components/SideBar/CustomViewer/HeadingItem.tsx b/src/components/SideBar/CustomViewer/HeadingItem.tsx index 742afe35..4c8d1017 100644 --- a/src/components/SideBar/CustomViewer/HeadingItem.tsx +++ b/src/components/SideBar/CustomViewer/HeadingItem.tsx @@ -21,7 +21,8 @@ import { Snackbar, } from '@mui/material'; import { Theme } from 'features/settingSlices'; -import { LaunchOutlined, LinkOutlined } from '@mui/icons-material'; +import LaunchOutlined from '@mui/icons-material/LaunchOutlined'; +import LinkOutlined from '@mui/icons-material/LinkOutlined'; const useStyles = makeStyles()((theme) => ({ title: { diff --git a/src/components/SideBar/CustomViewer/PagesView.tsx b/src/components/SideBar/CustomViewer/PagesView.tsx index bed708f2..7993ff34 100644 --- a/src/components/SideBar/CustomViewer/PagesView.tsx +++ b/src/components/SideBar/CustomViewer/PagesView.tsx @@ -1,11 +1,16 @@ import React from 'react'; -import { TabPanel } from '@mui/lab'; +import TabPanel from '@mui/lab/TabPanel'; import { useNavigate } from 'react-router-dom'; import { useDispatch, useSelector } from 'react-redux'; import { toggleRecents } from 'features/navSlices'; import { removeCurrentPage } from 'features/currentSlices'; -import { Collapse, IconButton, List, ListItem, ListItemText, ListSubheader } from '@mui/material'; +import Collapse from '@mui/material/Collapse'; +import IconButton from '@mui/material/IconButton'; +import List from '@mui/material/List'; +import ListItem from '@mui/material/ListItem'; +import ListItemText from '@mui/material/ListItemText'; +import ListSubheader from '@mui/material/ListSubheader'; import Delete from '@mui/icons-material/Delete'; import ExpandMore from '@mui/icons-material/ExpandMore'; import NavigateNext from '@mui/icons-material/NavigateNext'; @@ -14,7 +19,8 @@ import { recentsSelector } from 'features/linkSlices'; import { makeStyles } from 'styles/common'; import { Theme } from 'features/settingSlices'; -import { DescriptionOutlined, MouseOutlined } from '@mui/icons-material'; +import DescriptionOutlined from '@mui/icons-material/DescriptionOutlined'; +import MouseOutlined from '@mui/icons-material/MouseOutlined'; import { LinkTreeView } from '../LinkTreeView'; diff --git a/src/components/SideBar/CustomViewer/SidebarItem.tsx b/src/components/SideBar/CustomViewer/SidebarItem.tsx index b0531292..214a440d 100644 --- a/src/components/SideBar/CustomViewer/SidebarItem.tsx +++ b/src/components/SideBar/CustomViewer/SidebarItem.tsx @@ -47,7 +47,9 @@ import { PageButton } from 'components/NavBar/PageButton'; import Description from '@mui/icons-material/Description'; import dayjs from 'dayjs'; import { addRecentPage } from 'features/currentSlices'; -import { ArrowDropDown, ArrowRight, DescriptionOutlined } from '@mui/icons-material'; +import ArrowDropDown from '@mui/icons-material/ArrowDropDown'; +import ArrowRight from '@mui/icons-material/ArrowRight'; +import DescriptionOutlined from '@mui/icons-material/DescriptionOutlined'; import { Theme } from 'features/settingSlices'; import { findColor } from 'utils/document'; import { SideBarItemList } from '../SidebarItemList'; diff --git a/src/components/SideBar/index.tsx b/src/components/SideBar/index.tsx index a7c07785..99b9d4ba 100644 --- a/src/components/SideBar/index.tsx +++ b/src/components/SideBar/index.tsx @@ -9,10 +9,11 @@ import ListAlt from '@mui/icons-material/ListAlt'; import { useLocation } from 'react-router-dom'; import { Box, Drawer, Tab } from '@mui/material'; -import { TabContext, TabList } from '@mui/lab'; +import TabContext from '@mui/lab/TabContext'; +import TabList from '@mui/lab/TabList'; import { MimeType } from 'constants/editor'; import CalendarMonth from '@mui/icons-material/CalendarMonth'; -import { DescriptionOutlined } from '@mui/icons-material'; +import DescriptionOutlined from '@mui/icons-material/DescriptionOutlined'; import { findCurrentPageLink } from 'features/linkSlices'; import { CustomViewer } from './CustomViewer'; import { PagesView } from './CustomViewer/PagesView'; diff --git a/src/components/application/LogoMenu.tsx b/src/components/application/LogoMenu.tsx index 77a09afd..68a024ca 100644 --- a/src/components/application/LogoMenu.tsx +++ b/src/components/application/LogoMenu.tsx @@ -1,18 +1,17 @@ import React from 'react'; -import { - Divider, - IconButton, - List, - ListItemButton, - ListItemIcon, - ListItemText, - Popover, - Typography, -} from '@mui/material'; +import Divider from '@mui/material/Divider'; +import IconButton from '@mui/material/IconButton'; +import List from '@mui/material/List'; +import ListItemButton from '@mui/material/ListItemButton'; +import ListItemIcon from '@mui/material/ListItemIcon'; +import ListItemText from '@mui/material/ListItemText'; + import { makeStyles } from 'styles/common'; import { Theme } from 'features/settingSlices'; import { CreateButton } from 'components/NavBar/CreateButton'; -import { PetsOutlined } from '@mui/icons-material'; +import PetsOutlined from '@mui/icons-material/PetsOutlined'; +import Popover from '@mui/material/Popover'; +import Typography from '@mui/material/Typography'; const useStyles = makeStyles()((theme) => ({ iconButton: { diff --git a/src/components/commons/Fade.tsx b/src/components/commons/Fade.tsx index d5a15992..1269bdfd 100644 --- a/src/components/commons/Fade.tsx +++ b/src/components/commons/Fade.tsx @@ -1,6 +1,6 @@ /* eslint-disable react-hooks/exhaustive-deps */ import React, { useEffect, useRef, ReactNode } from 'react'; -import { Fade as MaterialFade } from '@mui/material'; +import MaterialFade from '@mui/material/Fade'; interface FadeProps { timeout?: number; diff --git a/src/components/commons/Guide.tsx b/src/components/commons/Guide.tsx index 51c31165..461537c8 100644 --- a/src/components/commons/Guide.tsx +++ b/src/components/commons/Guide.tsx @@ -4,7 +4,7 @@ import { LyingDown } from 'components/icon/LyingDown'; import { StandUp } from 'components/icon/StandUp'; import { toggleInstant } from 'features/navSlices'; import { useDispatch, useSelector } from 'react-redux'; -import { Badge } from '@mui/material'; +import Badge from '@mui/material/Badge'; export function Guide() { const dispatch = useDispatch(); diff --git a/src/index.scss b/src/index.scss index 60ef73bf..55bb9af1 100644 --- a/src/index.scss +++ b/src/index.scss @@ -606,6 +606,8 @@ blockquote { .CodeMirror-foldmarker { color: #ffffff !important; + background-color: #111 !important; + border: 1px solid rgb(113, 113, 113) !important; } .CodeMirror-dialog { @@ -721,7 +723,7 @@ blockquote { } .CodeMirror-line span.cm-builtin { - color: #30a; + color: #66d9ef; } .CodeMirror-line span.cm-bracket {