diff --git a/package-lock.json b/package-lock.json index 203728c..d4726a1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14,6 +14,7 @@ "axios": "^0.27.2", "keycloak-js": "^19.0.1", "markdown": "^0.5.0", + "marked": "^4.2.12", "prop-types": "^15.8.1", "react": "^18.2.0", "react-dom": "^18.2.0", @@ -11725,6 +11726,17 @@ "node": "*" } }, + "node_modules/marked": { + "version": "4.2.12", + "resolved": "https://registry.npmjs.org/marked/-/marked-4.2.12.tgz", + "integrity": "sha512-yr8hSKa3Fv4D3jdZmtMMPghgVt6TWbk86WQaWhDloQjRSQhMMYCAro7jP7VDJrjjdV8pxVxMssXS8B8Y5DZ5aw==", + "bin": { + "marked": "bin/marked.js" + }, + "engines": { + "node": ">= 12" + } + }, "node_modules/mdn-data": { "version": "2.0.4", "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.4.tgz", @@ -25423,6 +25435,11 @@ "nopt": "~2.1.1" } }, + "marked": { + "version": "4.2.12", + "resolved": "https://registry.npmjs.org/marked/-/marked-4.2.12.tgz", + "integrity": "sha512-yr8hSKa3Fv4D3jdZmtMMPghgVt6TWbk86WQaWhDloQjRSQhMMYCAro7jP7VDJrjjdV8pxVxMssXS8B8Y5DZ5aw==" + }, "mdn-data": { "version": "2.0.4", "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.4.tgz", diff --git a/package.json b/package.json index 3ac2639..9eb2d8a 100644 --- a/package.json +++ b/package.json @@ -12,6 +12,7 @@ "axios": "^0.27.2", "keycloak-js": "^19.0.1", "markdown": "^0.5.0", + "marked": "^4.2.12", "prop-types": "^15.8.1", "react": "^18.2.0", "react-dom": "^18.2.0", diff --git a/src/components/specific_challenge/Readme.js b/src/components/specific_challenge/Readme.js index 7d77191..70b54f4 100644 --- a/src/components/specific_challenge/Readme.js +++ b/src/components/specific_challenge/Readme.js @@ -1,22 +1,33 @@ import React from 'react'; import {FlexColumn} from '../../utils/containers'; -import {Body, H2, Medium} from '../../utils/fonts'; +import {Body, H2} from '../../utils/fonts'; import Media from 'react-media'; import theme from '../../utils/theme'; import getChallengeFullDescription from '../../api/getChallengeFullDescription'; -import {markdown} from 'markdown'; +// import {markdown} from 'markdown'; import styled from 'styled-components'; import InfoList from '../generic/InfoList'; import Loading from '../generic/Loading'; import PropsTypes from 'prop-types'; import MiniChallenge from '../challenges_list/MiniChallenge'; +import { marked } from 'marked'; const ReadmeStyle = styled(Body)` + * { + font-weight: inherit; + } + + h2 { + font-family: 'Kanit', sans-serif; + margin: 32px 0; + } + h3 { font-family: 'Kanit', sans-serif; - font-weight: 400; + font-weight: inherit; font-size: 18px; line-height: 22px; + margin: 24px 0; @media (min-width: ${({theme}) => theme.overMobile}) { font-size: 22px; @@ -62,13 +73,19 @@ const Readme = (props) => { }, [props.challengeName]); const parseMarkdownResponse = (response) => { - let result = markdown.toHTML(response); - let regex = /