Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit11b4466

Browse files
author
贺子良
committed
💫 workflow(add 'react-markdown'):
1 parent00c9a14 commit11b4466

File tree

19 files changed

+2001
-50
lines changed

19 files changed

+2001
-50
lines changed

‎.env.production

Whitespace-only changes.

‎package-lock.json

Lines changed: 1646 additions & 2 deletions
Some generated files are not rendered by default. Learn more aboutcustomizing how changed files appear on GitHub.

‎package.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,14 @@
66
"@testing-library/jest-dom":"^5.16.2",
77
"@testing-library/react":"^12.1.3",
88
"@testing-library/user-event":"^13.5.0",
9+
"markdown-navbar":"^1.4.3",
910
"react":"^17.0.2",
1011
"react-dom":"^17.0.2",
12+
"react-markdown":"^8.0.0",
1113
"react-router":"^6.2.1",
1214
"react-router-dom":"^6.2.1",
1315
"react-scripts":"5.0.0",
16+
"remark-gfm":"^3.0.1",
1417
"styled-components":"^5.3.3",
1518
"web-vitals":"^2.1.4"
1619
},

‎public/index.html

Lines changed: 28 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,29 @@
11
<!DOCTYPE html>
22
<htmllang="en">
3-
<head>
4-
<metacharset="utf-8"/>
5-
<linkrel="icon"href="%PUBLIC_URL%/favicon.ico"/>
6-
<metaname="viewport"content="width=device-width, initial-scale=1"/>
7-
<metaname="theme-color"content="#000000"/>
8-
<meta
9-
name="description"
10-
content="Web site created using create-react-app"
11-
/>
12-
<linkrel="apple-touch-icon"href="%PUBLIC_URL%/logo192.png"/>
13-
<!--
3+
<head>
4+
<metacharset="utf-8"/>
5+
<linkrel="icon"href="%PUBLIC_URL%/favicon.ico"/>
6+
<metaname="viewport"content="width=device-width, initial-scale=1"/>
7+
<metaname="theme-color"content="#000000"/>
8+
<meta
9+
name="description"
10+
content="Web site created using create-react-app"
11+
/>
12+
<linkrel="apple-touch-icon"href="%PUBLIC_URL%/logo192.png"/>
13+
<!--
1414
manifest.json provides metadata used when your web app is installed on a
1515
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
1616
-->
17-
<linkrel="manifest"href="%PUBLIC_URL%/manifest.json"/>
18-
<!--
17+
<!--<link rel=stylesheet
18+
href=https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.60.0/codemirror.min.css>
19+
<link rel=stylesheet
20+
href=https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.60.0/theme/nord.min.css>
21+
<link rel=stylesheet
22+
href=https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/styles/github.min.css>-->
23+
<linkrel=stylesheet
24+
href=https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/4.0.0/github-markdown.min.css>
25+
<linkrel="manifest"href="%PUBLIC_URL%/manifest.json"/>
26+
<!--
1927
Notice the use of %PUBLIC_URL% in the tags above.
2028
It will be replaced with the URL of the `public` folder during the build.
2129
Only files inside the `public` folder can be referenced from the HTML.
@@ -24,12 +32,12 @@
2432
work correctly both with client-side routing and a non-root public URL.
2533
Learn how to configure a non-root public URL by running `npm run build`.
2634
-->
27-
<title>React App</title>
28-
</head>
29-
<body>
30-
<noscript>You need to enable JavaScript to run this app.</noscript>
31-
<divid="root"></div>
32-
<!--
35+
<title>React App</title>
36+
</head>
37+
<body>
38+
<noscript>You need to enable JavaScript to run this app.</noscript>
39+
<divid="root"></div>
40+
<!--
3341
This HTML file is a template.
3442
If you open it directly in the browser, you will see an empty page.
3543
@@ -38,6 +46,5 @@
3846
3947
To begin the development, run `npm start` or `yarn start`.
4048
To create a production bundle, use `npm run build` or `yarn build`.
41-
-->
42-
</body>
49+
--></body>
4350
</html>

‎src/App.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ function App() {
1616
<Routeindexelement={<Home/>}/>
1717
<Routepath="projects"element={<Projects/>}>
1818
<Routeindexelement={<ProjectsList/>}/>
19-
<Routepath=":pid"element={<ProjectsDetail/>}/>
19+
<Routepath=":id"element={<ProjectsDetail/>}/>
2020
</Route>
2121
<Routepath="work"element={<Work/>}/>
2222

‎src/assets/doc/m.md

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
2+
3+
4+
* 贺子良/男/2019毕业
5+
6+
* 本科/中南林业科技大学
7+
8+
* 工作年限:3年
9+
10+
* 技术栈:vue2 | vue3 | react
11+
12+
* Github:https://github.com/coderzii
13+
14+
* Tel:18616240038
15+
16+
* 期望职位:Web前端工程师
17+
18+
* 居住地区:上海市浦东新区

‎src/assets/doc/p1.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
2+
#一级标题
3+
4+
##二级标题
5+
6+
###三级标题

‎src/assets/doc/p2.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
2+
3+
#p02

‎src/assets/doc/p3.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
2+
3+
#p03

‎src/assets/doc/w.md

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
#Project1
2+
3+
`react-markdown` is a markdown component for React.
4+
5+
👉 Changes are re-rendered as you type.
6+
7+
👈 Try writing some markdown on the left.
8+
9+
##Overview
10+
11+
* Follows[CommonMark](https://commonmark.org)
12+
* Optionally follows[GitHub Flavored Markdown](https://github.github.com/gfm/)
13+
* Renders actual React elements instead of using`dangerouslySetInnerHTML`
14+
* Lets you define your own components (to render`MyHeading` instead of`h1`)
15+
* Has a lot of plugins
16+
17+
##Table of contents
18+
19+
Here is an example of a plugin in action
20+
([`remark-toc`](https://github.com/remarkjs/remark-toc)).
21+
This section is replaced by an actual table of contents.
22+
23+
##Syntax highlighting
24+
25+
Here is an example of a plugin to highlight code:
26+
[`rehype-highlight`](https://github.com/rehypejs/rehype-highlight).
27+
28+
```js
29+
importReactfrom'react'
30+
importReactDOMfrom'react-dom'
31+
importReactMarkdownfrom'react-markdown'
32+
importrehypeHighlightfrom'rehype-highlight'
33+
34+
ReactDOM.render(
35+
<ReactMarkdown rehypePlugins={[rehypeHighlight]}>{'# Your markdown here'}</ReactMarkdown>,
36+
document.querySelector('#content')
37+
)
38+
```
39+
40+
Pretty neat, eh?
41+
42+
##GitHub flavored markdown (GFM11111111111)
43+
44+
For GFM, you can*also* use a plugin:
45+
[`remark-gfm`](https://github.com/remarkjs/react-markdown#use).
46+
It adds support for GitHub-specific extensions to the language:
47+
tables, strikethrough, tasklists, and literal URLs.
48+
49+
These features**do not work by default**.
50+
👆 Use the toggle above to add the plugin.
51+
52+
| Feature| Support|
53+
| ---------:| :-------------------|
54+
| CommonMark| 100%|
55+
| GFM| 100% w/`remark-gfm`|
56+
57+
~~strikethrough~~
58+
59+
*[ ] task list
60+
*[x] checked item
61+
62+
https://example.com
63+
64+
##HTML in markdown
65+
66+
⚠️ HTML in markdown is quite unsafe, but if you want to support it, you can
67+
use[`rehype-raw`](https://github.com/rehypejs/rehype-raw).
68+
You should probably combine it with
69+
[`rehype-sanitize`](https://github.com/rehypejs/rehype-sanitize).
70+
71+
<blockquote>
72+
👆 Use the toggle above to add the plugin.
73+
</blockquote>

‎src/components/Markdown.jsx

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
/*
2+
*@Date: 2022-03-05
3+
*@Description:
4+
*/
5+
import{useState,useEffect}from"react";
6+
importstyledfrom"styled-components";
7+
8+
importReactMarkdownfrom"react-markdown";
9+
importremarkGfmfrom"remark-gfm";
10+
importMarkNavfrom"markdown-navbar";
11+
import"markdown-navbar/dist/navbar.css";
12+
13+
importp1from"../assets/doc/p1.md";
14+
importp2from"../assets/doc/p2.md";
15+
importp3from"../assets/doc/p3.md";
16+
importwfrom"../assets/doc/w.md";
17+
importmfrom"../assets/doc/m.md";
18+
19+
exportconstMarkdownNavWrapper=styled.div`
20+
position: fixed;
21+
top: 118px;
22+
left: 10px;
23+
24+
.title-anchor {
25+
max-width: 220px;
26+
text-overflow: ellipsis;
27+
overflow: hidden;
28+
white-space: nowrap;
29+
}
30+
`;
31+
32+
constmarkdownMap=newMap();
33+
markdownMap.set("p1",p1);
34+
markdownMap.set("p2",p1);
35+
markdownMap.set("p3",p1);
36+
markdownMap.set("w",w);
37+
markdownMap.set("m",m);
38+
39+
exportfunctionMarkdown(props){
40+
const[md,setMd]=useState("");
41+
42+
const{ id}=props;
43+
44+
constmdFile=markdownMap.get(`${id}`);
45+
46+
console.log("idid=>",id);
47+
48+
useEffect(()=>{
49+
//fetch("/doc/help.md");
50+
fetch(mdFile)
51+
.then((resp)=>resp.text())
52+
.then((txt)=>{
53+
setMd(txt);
54+
});
55+
console.log("useEffect=>",md);
56+
},[md]);
57+
return(
58+
<>
59+
<MarkdownNavWrapperclassName="markdown-nav">
60+
<MarkNavsource={md}/>
61+
</MarkdownNavWrapper>
62+
<ReactMarkdown
63+
className="markdown-body"
64+
children={md}
65+
remarkPlugins={[remarkGfm]}
66+
/>
67+
</>
68+
);
69+
}

‎src/layout/styles.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -225,5 +225,9 @@ export const LayoutWrapper = styled.div`
225225
}
226226
}
227227
}
228+
229+
.markdown-body {
230+
/*font-family: Andale Mono !important;*/
231+
}
228232
}
229233
`;

‎src/pages/home/index.jsx

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@
44
*/
55
import{HomeWrapper}from"./styles";
66

7+
import{Markdown}from"../../components/Markdown";
8+
79
exportdefaultfunctionHome(){
810
return(
911
<HomeWrapper>
@@ -14,8 +16,8 @@ export default function Home() {
1416
style={{left:"-5px",width:"50px",height:"1px"}}
1517
></figure>
1618
</h1>
17-
<divclassName="page-content markdown-body">
18-
<p> Hey. I'm Ziliang He.</p>
19+
<divclassName="page-content">
20+
<Markdownid="m"/>
1921
</div>
2022
</HomeWrapper>
2123
);

‎src/pages/home/styles.js

Lines changed: 0 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -24,16 +24,4 @@ export const HomeWrapper = styled.div`
2424
font-size: 12.8px;
2525
line-height: 1.5;
2626
}
27-
28-
.markdown-body {
29-
.markdown-body {
30-
color: #24292e;
31-
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica,
32-
Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji,
33-
Segoe UI Symbol;
34-
font-size: 16px;
35-
line-height: 1.5;
36-
word-wrap: break-word;
37-
}
38-
}
3927
`;

‎src/pages/projects/detail/index.jsx

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,17 @@
22
*@Date: 2022-02-25
33
*@Description:
44
*/
5+
import{useState,useEffect}from"react";
56
import{useParams}from"react-router";
67
import{ProjectsDetailWrapper}from"./styles";
8+
import{Markdown}from"../../../components/Markdown";
79

810
exportdefaultfunctionProjectsDetai(){
911
constparams=useParams();
10-
const{pid}=params;
12+
const{id}=params;
1113
return(
1214
<ProjectsDetailWrapper>
13-
<h3>pid :{pid}</h3>
15+
<Markdownid={id}/>
1416
</ProjectsDetailWrapper>
1517
);
1618
}

‎src/pages/projects/detail/styles.js

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,17 @@
22
*@Date: 2022-02-25
33
*@Description:
44
*/
5-
importstyledComponentsfrom"styled-components";
6-
7-
exportconstProjectsDetailWrapper=styledComponents.div`
5+
importstyledfrom"styled-components";
86

7+
exportconstProjectsDetailWrapper=styled.div`
8+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
9+
Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
910
11+
@media screen and (max-width: 768px) {
12+
.markdown-nav {
13+
display: none;
14+
}
15+
}
1016
`;
17+
18+

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp