Skip to content

Commit 3ff90b2

Browse files
ShMcKShMcK
authored
Merge pull request #346 from coderoad/fix/markdown-styles
markdown style fixes (strong, table)
2 parents d2e80e3 + bd8b1b6 commit 3ff90b2

File tree

2 files changed

+203
-3
lines changed

2 files changed

+203
-3
lines changed

Diff for: ‎web-app/src/components/Markdown/style.css

+176
Original file line numberDiff line numberDiff line change
@@ -10,3 +10,179 @@
1010
font-size: 80%;
1111
white-space: nowrap;
1212
}
13+
14+
strong {
15+
font-weight: 600;
16+
text-decoration-style: solid;
17+
}
18+
19+
blockquote {
20+
border-left: 4px solid #dddddd;
21+
padding: 0 15px;
22+
color: #777777;
23+
}
24+
blockquote > :first-child {
25+
margin-top: 0;
26+
}
27+
blockquote > :last-child {
28+
margin-bottom: 0;
29+
}
30+
31+
table {
32+
padding: 0;
33+
background-color: #dfe2e5;
34+
margin: 6px 0px;
35+
}
36+
table tr {
37+
/* border-top: 1px solid #cccccc; */
38+
background-color: white;
39+
margin: 0;
40+
padding: 0;
41+
}
42+
table tr:nth-child(2n) {
43+
background-color: #f8f8f8;
44+
}
45+
table tr th {
46+
font-weight: bold;
47+
/* border: 1px solid #cccccc; */
48+
text-align: left;
49+
margin: 0;
50+
padding: 6px 13px;
51+
box-sizing: border-box;
52+
}
53+
table tr td {
54+
/* border: 1px solid #cccccc; */
55+
text-align: left;
56+
margin: 0;
57+
padding: 6px 13px;
58+
}
59+
table tr th :first-child,
60+
table tr td :first-child {
61+
margin-top: 0;
62+
}
63+
table tr th :last-child,
64+
table tr td :last-child {
65+
margin-bottom: 0;
66+
}
67+
68+
img {
69+
max-width: 100%;
70+
}
71+
72+
span.frame {
73+
display: block;
74+
overflow: hidden;
75+
}
76+
span.frame > span {
77+
border: 1px solid #dddddd;
78+
display: block;
79+
float: left;
80+
overflow: hidden;
81+
margin: 13px 0 0;
82+
padding: 7px;
83+
width: auto;
84+
}
85+
span.frame span img {
86+
display: block;
87+
float: left;
88+
}
89+
span.frame span span {
90+
clear: both;
91+
color: #333333;
92+
display: block;
93+
padding: 5px 0 0;
94+
}
95+
span.align-center {
96+
display: block;
97+
overflow: hidden;
98+
clear: both;
99+
}
100+
span.align-center > span {
101+
display: block;
102+
overflow: hidden;
103+
margin: 13px auto 0;
104+
text-align: center;
105+
}
106+
span.align-center span img {
107+
margin: 0 auto;
108+
text-align: center;
109+
}
110+
span.align-right {
111+
display: block;
112+
overflow: hidden;
113+
clear: both;
114+
}
115+
span.align-right > span {
116+
display: block;
117+
overflow: hidden;
118+
margin: 13px 0 0;
119+
text-align: right;
120+
}
121+
span.align-right span img {
122+
margin: 0;
123+
text-align: right;
124+
}
125+
span.float-left {
126+
display: block;
127+
margin-right: 13px;
128+
overflow: hidden;
129+
float: left;
130+
}
131+
span.float-left span {
132+
margin: 13px 0 0;
133+
}
134+
span.float-right {
135+
display: block;
136+
margin-left: 13px;
137+
overflow: hidden;
138+
float: right;
139+
}
140+
span.float-right > span {
141+
display: block;
142+
overflow: hidden;
143+
margin: 13px auto 0;
144+
text-align: right;
145+
}
146+
147+
code,
148+
tt {
149+
margin: 0 2px;
150+
padding: 0 5px;
151+
white-space: nowrap;
152+
border: 1px solid #eaeaea;
153+
background-color: #f8f8f8;
154+
border-radius: 3px;
155+
}
156+
157+
pre code {
158+
margin: 0;
159+
padding: 0;
160+
white-space: pre;
161+
border: none;
162+
background: transparent;
163+
}
164+
165+
.highlight pre {
166+
background-color: #f8f8f8;
167+
border: 1px solid #cccccc;
168+
font-size: 13px;
169+
line-height: 19px;
170+
overflow: auto;
171+
padding: 6px 10px;
172+
border-radius: 3px;
173+
}
174+
175+
pre {
176+
background-color: #f8f8f8;
177+
border: 1px solid #cccccc;
178+
font-size: 13px;
179+
line-height: 19px;
180+
overflow: auto;
181+
padding: 6px 10px;
182+
border-radius: 3px;
183+
}
184+
pre code,
185+
pre tt {
186+
background-color: transparent;
187+
border: none;
188+
}

Diff for: ‎web-app/stories/Step.stories.tsx

+27-3
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,8 @@ import SideBarDecorator from './utils/SideBarDecorator'
88
const stepText =
99
'This is a long paragraph of step text intended to wrap around the side after a short period of writing to demonstrate text wrap among other things'
1010

11-
const paragraphText = `Markdown included \`code\`, *bold*, & _italics_.
11+
const paragraphText = `
12+
### Code
1213
1314
Inline code: \`<h1>HTML</h1>\`, \`function someFunc() { var a = 1; return a; }\`
1415
@@ -20,15 +21,38 @@ const paragraphText = `Markdown included \`code\`, *bold*, & _italics_.
2021
}
2122
\`\`\`
2223
23-
Headers can be added:
24+
### Headers
2425
2526
# h1
2627
## h2
2728
### h3
2829
#### h4
2930
##### h5
3031
31-
Emojis: :) :| :(
32+
### Emojis
33+
34+
:) :| :(
35+
36+
### Text Formatting
37+
38+
**bold**, *italics*, ~~strikethrough~~
39+
40+
### BlockQuote
41+
42+
> A quote here
43+
44+
### Tables
45+
| First Header | Second Header |
46+
| ------------- | ------------- |
47+
| Content Cell | Content Cell |
48+
| Content Cell | Content Cell |
49+
50+
51+
52+
| Left-aligned | Center-aligned | Right-aligned |
53+
| :--- | :---: | ---: |
54+
| git status | git status | git status |
55+
| git diff | git diff | git diff |
3256
`
3357

3458
storiesOf('Step', module)

0 commit comments

Comments
 (0)