I am making a blog website in React in which user can submit code with other text. The entire code and other text will later be saved into the database. I am looking for the functionality like Stackoverflow's in which user can submit code and it is shown in the post in the original format.
I tried my best to search for the exact name of this functionality(My best guess is using LateX) but couldn't find any. So my exact question is what module or package do I need to represent the code submitted by the user in the original format as in Stackoverflow's question.
Please help me in the problem so I can get along with my work on my website.
After a bit of research into the topic of markdown, I found that react-markdown is a npm module that can be used to create markdown in text string. It is almost similar to the one used in Stackoverflow. But the recent version seems to have some bug, so I used an older version(5.0.0). If you also want to include syntax highlighting, you can use highlight.js. It can be very easily included with react-markdown. Below is an example of react-markdown:
import React from "react";
import ReactMarkdown from "react-markdown";
export default class App3 extends React.Component {
render(){
var value='
#Heading1
<b>line break</b>
_italics_';
return (
<div className="App">
<ReactMarkdown source={value} />
</div>
);}
}
u can also use
dangerouslySetInnerHTML
if u don't to install 3rd libary
Related
I'm creating a documentation in React for an internal project. To help users to enter the good informations, I ask them some informations in beginning of the documentation such as their username or their machine's IP and save them in a cookie (we have no backend). These datas are display in the documentation to help them to configure their environment.
We also include some codes, command lines and configuration in yaml. To make the code more clear, I use React Syntax Highlighter. It works well except for on things and I don't find a work around: Sometime, the code include the Username or IP. But when I include the components to display these datas in the code, it's not display correctly.
Example:
const config_data = '# Maintainer\n\
MAINTAINER "' + <DisplayName /> + '"\n\n\
# copy your file\n\
COPY ./test.test /usr/local/test.test';
class Test extends React.Component {
render() {
return(
<div>
<SyntaxHighlighter language="dockerfile">
{config_data}
</SyntaxHighlighter>
</div>);
}
}
The result will give me:
# Maintainer
MAINTAINER "[object Object]"
# copy your file
COPY ./test.test /usr/local/test.test
I find this issue which helped me to understand what happens but because the React Syntax Highlighter component is not mine, I can not (not in my knowledge at least) modify it. I also tried to get the data directly from the cookies to display the data directly but the result is the same.
I don't know if it's a bug of the component, if I can render my own component before to include it or if I missed something.
You can use ReactDOMServer to convert the component into a string/markup.
import * as ReactDOMServer from 'react-dom/server';
const config_data = `# Maintainer\n\
MAINTAINER ${ReactDOMServer.renderToStaticMarkup(<DisplayName />)} \n\n\
# copy your file\n\
COPY ./test.test /usr/local/test.test`;
I'm currently running into a problem that I can't solve (I've been searching for solutions since this morning, but I can't manage to find what I need).
I created a React app using react-markdown, allowing the user to edit some post-its, whose content is stored in Markdown format in my DB. But the thing is, I discovered there was no way to underline a text (I thought that if you could do it on Discord, then it means that it's the same in Markdown).
What I'd like is a solution allowing me to simply transform this:
**Bold text**
__Underlined text__
Into... well... you know what I mean. It doesn't have to be this exact syntax, but at least something similar. The only thing I've found is to create custom components, which I don't want because it requires using an already existing syntax, or, to convert the Markdown with replace() functions and use dangerouslySetInnerHTML to display it, which I don't want either, because isn't it called "dangerouslySetInnerHTML" for a reason?
I'd really appreciate if someone could help. And by the way, sorry for any grammar mistakes, English isn't my native language...
Right now there are no identifiers for underlining text in markdown syntax.
But as you know we can achieve it by using html tags in our markdown.
But we don't have to use dangerouslySetInnerHTML in react-markdown for parsing HTML tags. react-markdown (Check Appendix A: HTML in markdown) uses a plugin rehype-raw.
You can question the thing that rehype-raw internally implements allowDangerousHtml:true, but to prevent this , we can wrap our markdown content around Dompurify.sanitize() to reduce code vulnerablity.
I also faced the same problem , so this is the approach I tried and it worked for me .
import ReactMarkdown from "react-markdown";
import rehypeRaw from "rehype-raw";
import DOMpurify from 'dompurify';
import "./styles.css";
export default function App() {
const markdown = `
**Parsing html in react markdown**
<u>underlined text</u>
`;
return (
<div className="App">
<ReactMarkdown rehypePlugins={[rehypeRaw]}>
{DOMpurify.sanitize(markdown)}
</ReactMarkdown>
</div>
);
}
CodeSandBoxLink
How do I or what is the alternative method to break this layout into react component? The code below is bootstrap 4 for simplicity and what I want to achieve is something like this https://codedthemes.com/demos/admin-templates/material-able/bootstrap/default/ where contents are dynamic which is actually consist of different components. So what I am showing here is the simplified HTML code of the actual thing but has a similar structure. The question here how do I break them into components with this HTML structure? Many thanks in advance and appreciate any helps. Thanks again.
<div class="wholepage">
<navbar>
</navbar>
<sidebar>
<dynamiccontent>
</dynamiccontent>
<sidebar>
</div>
What you are describing is one of the selling points of React - the ability to modularise bits of code into what React calls components.
To build something like what you have linked you would need to nest components.
Using the example you might have an app.js that looks something like this.
import React from 'react'
import graph1 from './components/graph1'
import graph2 from './components/graph2'
const app = () => {
return (
<div>
<graph1 key1="props data goes here"/>
<graph2 key1="props data goes here"/>
</div>
)
}
export default app;
graph1 and graph2 are seperate components that have been imported and then nested in the app component as shown below.
The key1 attributes in each component accept values/functions that are passed down to graph1 and graph2 components for further processing and/or display. This is what allows you to make the content dynamic.
What I've mentioned above is very rudimentary but I think answers your question. ReactJS is a massive topic and will take a lot of practice to get used to. is well documented and there is a lot of fantastic documentation, examples and discussion online such as:
React components
React Props
React Design Patterns
DISCLAIMER: Fairly new to react myself, just trying to share the knowledge :)
so my goal is to display a Page from Wikipedia in my Web-Page using React. I have only one Idea to do that, and it's:
First Step: Export data from Wiki as .XML
Second Step: import data from .xml in HTML(using React).
First Step I have done succesfully, but I have Problems with second.
I have found xml-parser from npm(xml-loader):https://www.npmjs.com/package/xml-loader. but it's giving me only following string: "/static/media/wiki.c6730c07.xml" . Knows someone better way to do that, or it will be good if you say, that I am on right way. My code in React is :
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
var wiki = require('./wiki.xml');
class App extends Component {
render() {
return (
<div className="App">
{wiki}
</div>
);
}
}
export default App;
xml-renderer might be a good candidate for helping you.
So, I have found out that, to do something like this, I have to use "xslt", where I can get data from ".xml" and display them how I want. Important is to create a reference between xml and xslt. Here are tree links, where you can see it on example:
https://www.youtube.com/watch?v=Zn9A5k23Oto
https://www.youtube.com/watch?v=Icg0Su5uEa8
https://www.codeproject.com/Articles/12047/How-to-Convert-XML-Files-to-HTML
But last question is: I want to display data from Wiki exactly how it is on it's Page, Is this Possible ?
If someone knows answer, please write Hint.
Regarding to your second question, about how to display data from Wiki exactly how it is on it's Page, you can use the <iframe> tag.
You can find more information here.
I am using contentful to get markdown to a react component that uses react-markdown to parse the markdown
import ReactMarkdown from 'react-markdown';
<Markdown source={text} />
Would I like to do is to override the Renderer so instead of it rendering ## as an h2 render i can pass a custom component to override the default h2 type to my own h2 component. How can i do that and is there and examples?
One of the options to <ReactMarkdown> is renderers.
One of the common renderers handles headings. If you look at the default rendering you'll see this:
heading: function Heading(props) {
return createElement('h' + props.level, getCoreProps(props), props.children);
},
So pass in your own heading handler. Check the level inside, roughly:
function CustomHeading(props) {
if (props.level !== 2) {
return createElement(`h${props.level}`, getCoreProps(props), props.children);
}
return <MyCustomElement {...props} />
}
If you don't have access to the code that commonmark-react-renderer gives you in the context of your function (which you probably won't) then you'd also need to duplicate what createElement gives you (but it's simple).
Unrelated: I've never used <ReactMarkdown> (but will), but this took me about five minutes of research. I'm including my path to encourage others to dig into their own questions and hopefully give some insight into how such things can be researched.
The react-markdown home page
Scanned through the "Options" section to see if custom rendering was trivially supported
Found the renderers option, which sounded promising
Clicked the link provided in that option's docs
Saw that heading was one of those (which made sense; I'd expect a renderer for every major formatting that Markdown supports)
Opened up the src directory to see if the implementation was easy to find
There was only one file, so I opened it
Searched the page for "heading" and found it
Cut and pasted that code here
The ability to read docs and follow trails is really important.