fix #39

content/6_Plat/Slope.mdx

@@ -144,8 +144,6 @@ dp[4]  = {  3,  -2,  -9, -16, -26}
 dif[4] = {  5,   7,   7,  10}
 ```
 
-<br/>
-
 After buying one share, $9$ is subtracted from each value and they are shifted one index to the right.
 
 ```
@@ -153,8 +151,6 @@ dp[5]  = {  x,  -6, -11, -18, -25, -35}
 dif[5] = {  x,   5,   7,   7,  10}
 ```
 
-<br/>
-
 Then we can choose to sell one share at price $9$. The last two DP values remain the same while the others change.
 
 ```
@@ -162,8 +158,6 @@ dp[5]  = {  3,  -2,  -9, -16, -25, -35}
 dif[5] = {  5,   7,   7,   9,  10}
 ```
 
-<br/>
-
 Again, we can choose to sell one share at price $9$. The last three DP values remain the same while the others change.
 
 ```
@@ -171,8 +165,6 @@ dp[5]  = {  7,   0,  -7, -16, -25, -35}
 dif[5] = {  7,   7,   9,   9,  10}
 ```
 
-<br/>
-
 (insert diagrams)
 
 </spoiler>

src/components/markdown/CodeBlock.tsx

@@ -19,7 +19,7 @@ export default ({ children, className }) => {
     >
       {({ className, style, tokens, getLineProps, getTokenProps }) => (
         <pre
-          className={'rounded ' + className}
+          className={'rounded whitespace-pre-wrap ' + className}
           style={{ ...style, padding: '20px' }}
         >
           {tokens.map((line, i) => (

src/components/markdown/SpoilerComponent.tsx

@@ -39,7 +39,7 @@ const SpoilerComponent = ({ children, title }) => {
         {title}
       </p>
 
-      {show && <div className="p-4 pt-0 spoiler-body">{children}</div>}
+      {show && <div className="px-4 spoiler-body">{children}</div>}
     </div>
   );
 };

src/styles/markdown.css

@@ -105,7 +105,9 @@
 .spoiler-body > pre {
   margin-left: -1rem !important;
   margin-right: -1rem !important;
-  margin-bottom: -1rem !important;
+}
+.spoiler-body > pre + p {
+  @apply mt-4;
 }
 
 .info-block .info-block__heading {