diff --git a/public/api/articles.json b/public/api/articles.json index 9db15fb..95ac975 100644 --- a/public/api/articles.json +++ b/public/api/articles.json @@ -4,7 +4,7 @@ "id": 0, "title": "Printing in Python", "desc":"How to print to the terminal in python", - "contents": "Hello and this is my tutorial on how to print in python3. First you want to open a python interpreter. Next type the following: `print('Hello World')` After that you have printed Hello World to the screen" + "contents": "*Introduction* This is my tutorial on how to print in python3. The print function is an easy way to show your users important information, design menus, and more. The print command is simple in it's usage. First you want to open a python interpreter. Next type the following: `print('Hello World')` After that you Hello World printed to the screen. You can check out more articles by scrolling down to the list of articles on this page." } ] } \ No newline at end of file diff --git a/src/components/Article.js b/src/components/Article.js index 82bbb56..4fa9c40 100644 --- a/src/components/Article.js +++ b/src/components/Article.js @@ -4,22 +4,33 @@ import './css/Articles.css'; const Article = ({article}) => { let articleFormatter = (text) => { - let output = [""]; + let output = []; let type = []; let ind = 0; let tick=false; + let delimiters = ['', '`', '*']; for (let i = 0; i < text.length; i++) { // Iterate through input - if (text[i] === '`') { // Detect Code Delimiter + console.log(text[i]); + if (delimiters.indexOf(text[i]) !== -1) { // Detect Code Delimiter + if (tick) { // Close the code section - + console.log(1); output[++ind] = "" tick = false; } else { // Start a new code section + console.log(2); + type.push(delimiters.indexOf(text[i])); - type.push(1); - output[++ind] = "" + if (!output[ind]) { + + output[ind] = ""; + + } else if (output.length < type.length) { + output[++ind] = ""; + } + tick = true; } @@ -27,14 +38,22 @@ const Article = ({article}) => { } else { // Append text to output if (output.length > type.length) { // If this is the beggining of a default text type + type.push(0); output[ind] = "" + } + console.log(3); + + output[ind] += text[i] } } + console.log(output); + console.log(type); + return [...output.keys()].map((i)=>{ // Format text and return as jsx @@ -46,7 +65,11 @@ const Article = ({article}) => { return
{output[i]}
; - } else { + } else if (type[i] === 2) { + + return
{output[i]}
; + + }else { return
; } }); diff --git a/src/components/css/Articles.css b/src/components/css/Articles.css index 4308e86..ca63e41 100644 --- a/src/components/css/Articles.css +++ b/src/components/css/Articles.css @@ -5,16 +5,6 @@ flex-direction: column; } -.article .title { - font-size: 32px; - margin: 10px; -} - -.article .description { - margin: 10px; - font-size: 18px; -} - .article .content { width: 80vw; text-align:left; @@ -26,4 +16,11 @@ color: gray; border-radius: 5px; margin: 10px; +} + +.article .h1 { + font-size: 24px; + font-weight:bolder; + margin-top: 10px; + margin-bottom: 10px; } \ No newline at end of file