Home Explore Help
Sign In
bh
/
react-web-tutorial
1
0
Fork 1
Files Issues 1 Pull Requests 0 Wiki
Browse Source

re-highlight code after markdown render

Benoît Hubert 7 years ago
parent
dddf747d97
commit
bfef7355a8
4 changed files with 17 additions and 15 deletions
Split View Show Diff Stats
  1. 8 8
      index.html
  2. 3 0
      react-tuto/src/index.js
  3. 1 1
      react-tuto/src/markdown.json
  4. 5 6
      react-tuto/src/markdown/part1/1. D'abord un peu de HTML.md

+ 8 - 8
index.html
View File 

@@ -40,6 +40,12 @@
 
       margin-top: 12px;
 
       max-height: 40px;
 
     }
 
+    #root {
 
+      padding: 30px;
 
+    }
 
+    .nav-wrapper {
 
+      padding: 0 30px;
 
+    }
 
   </style>
 
 
 </head>
 
@@ -48,7 +54,7 @@
 
       <div class="col-1-2" style="overflow-y: scroll">
 
 
         <nav class="light-blue lighten-1" role="navigation">
 
-          <div class="nav-wrapper container"><a id="logo-container" href="" class="brand-logo">
 
+          <div class="nav-wrapper"><a id="logo-container" href="" class="brand-logo">
 
             <img src="img/logo_orange_pastille.png" alt="logo WCS" />
 
             <img src="img/logo_js.png" alt="logo JS" />
 
           </a>
 
@@ -63,13 +69,7 @@
 
           </div>
 
         </nav>
 
 
-        <div class="container">
 
-          <div class="section">
 
-            <div class="row">
 
-              <div class="col s12" id="root"></div>
 
-            </div>
 
-          </div>
 
-        </div>
 
+        <div id="root"></div>
 
 
       </div>

+ 3 - 0
react-tuto/src/index.js
View File 

@@ -8,6 +8,9 @@ console.log(markdown);
 
 const input = '# This is a header\n\nAnd this is a paragraph'
 
 
 class Page extends React.Component {
 
+  componentDidMount() {
 
+    Prism.highlightAll();
 
+  }
 
   render() {
 
     const { title, md } = this.props;
 
     return (

File diff suppressed because it is too large
+ 1 - 1
react-tuto/src/markdown.json


+ 5 - 6
react-tuto/src/markdown/part1/1. D'abord un peu de HTML.md
View File 

@@ -2,11 +2,10 @@ Ouvre le fichier `empty.html`.
 
 
 Tu n'y verras pas grand chose. C'est normal, ça va être à toi de jouer !
 
 
-Commence par ajouter du contenu entre les tags `<body>` et `</body>`, sous la section "CONTENU". Un bouton par exemple. Si tu veux un exemple, regarde [ici](https://developer.mozilla.org/fr/docs/Web/HTML/Element/Button#Exemples). Après l'ajout, recharge cette page.
 
+Commence par ajouter du contenu entre les tags `<body>` et `</body>`, sous la section "CONTENU". Un bouton par exemple :
 
+```html
 
+<button>Whatever you like</button>
 
+```
 
+Après l'ajout, recharge cette page.
 
 
 Tu verras normalement tes ajouts s'afficher sur la moitié droite de l'écran&nbsp;! Passe à l'étape suivante.
 
-
 
-
 
-```javascript
 
-alert('toto');
 
-```