首页 发现 帮助
登录
bh
/
react-web-tutorial
1
0
派生 1
文件 工单管理 1 合并请求 0 Wiki
浏览代码

Utiliser titre de fichier comme titre de section, ajout Prism.js

Benoît Hubert 7 年之前
父节点
905a11c2b6
当前提交
6fb4d0a39d
共有 11 个文件被更改，包括 219 次插入 和 52 次删除
分列视图 显示文件统计
  1. 150 0
      css/prism.css
  2. 二进制
      img/logo_js.png
  3. 二进制
      img/logo_orange_pastille.png
  4. 24 21
      index.html
  5. 10 0
      js/prism.js
  6. 4 2
      react-tuto/gulpfile.js
  7. 2 23
      react-tuto/src/index.js
  8. 1 1
      react-tuto/src/markdown.json
  9. 12 0
      react-tuto/src/markdown/part1/1. D'abord un peu de HTML.md
  10. 16 0
      react-tuto/src/markdown/part1/2. Du JavaScript maintenant.md
  11. 0 5
      react-tuto/src/markdown/part1/index.md

+ 150 - 0
css/prism.css
查看文件 

@@ -0,0 +1,150 @@
 
+/* PrismJS 1.10.0
 
+http://prismjs.com/download.html?themes=prism-solarizedlight&languages=markup+css+clike+javascript+java+json+jsx */
 
+/*
 
+ Solarized Color Schemes originally by Ethan Schoonover
 
+ http://ethanschoonover.com/solarized
 
+
 
+ Ported for PrismJS by Hector Matos
 
+ Website: https://krakendev.io
 
+ Twitter Handle: https://twitter.com/allonsykraken)
 
+*/
 
+
 
+/*
 
+SOLARIZED HEX
 
+--------- -------
 
+base03    #002b36
 
+base02    #073642
 
+base01    #586e75
 
+base00    #657b83
 
+base0     #839496
 
+base1     #93a1a1
 
+base2     #eee8d5
 
+base3     #fdf6e3
 
+yellow    #b58900
 
+orange    #cb4b16
 
+red       #dc322f
 
+magenta   #d33682
 
+violet    #6c71c4
 
+blue      #268bd2
 
+cyan      #2aa198
 
+green     #859900
 
+*/
 
+
 
+code[class*="language-"],
 
+pre[class*="language-"] {
 
+	color: #657b83; /* base00 */
 
+	font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
 
+	text-align: left;
 
+	white-space: pre;
 
+	word-spacing: normal;
 
+	word-break: normal;
 
+	word-wrap: normal;
 
+
 
+	line-height: 1.5;
 
+
 
+	-moz-tab-size: 4;
 
+	-o-tab-size: 4;
 
+	tab-size: 4;
 
+
 
+	-webkit-hyphens: none;
 
+	-moz-hyphens: none;
 
+	-ms-hyphens: none;
 
+	hyphens: none;
 
+}
 
+
 
+pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
 
+code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
 
+	background: #073642; /* base02 */
 
+}
 
+
 
+pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
 
+code[class*="language-"]::selection, code[class*="language-"] ::selection {
 
+	background: #073642; /* base02 */
 
+}
 
+
 
+/* Code blocks */
 
+pre[class*="language-"] {
 
+	padding: 1em;
 
+	margin: .5em 0;
 
+	overflow: auto;
 
+	border-radius: 0.3em;
 
+}
 
+
 
+:not(pre) > code[class*="language-"],
 
+pre[class*="language-"] {
 
+	background-color: #fdf6e3; /* base3 */
 
+}
 
+
 
+/* Inline code */
 
+:not(pre) > code[class*="language-"] {
 
+	padding: .1em;
 
+	border-radius: .3em;
 
+}
 
+
 
+.token.comment,
 
+.token.prolog,
 
+.token.doctype,
 
+.token.cdata {
 
+	color: #93a1a1; /* base1 */
 
+}
 
+
 
+.token.punctuation {
 
+	color: #586e75; /* base01 */
 
+}
 
+
 
+.namespace {
 
+	opacity: .7;
 
+}
 
+
 
+.token.property,
 
+.token.tag,
 
+.token.boolean,
 
+.token.number,
 
+.token.constant,
 
+.token.symbol,
 
+.token.deleted {
 
+	color: #268bd2; /* blue */
 
+}
 
+
 
+.token.selector,
 
+.token.attr-name,
 
+.token.string,
 
+.token.char,
 
+.token.builtin,
 
+.token.url,
 
+.token.inserted {
 
+	color: #2aa198; /* cyan */
 
+}
 
+
 
+.token.entity {
 
+	color: #657b83; /* base00 */
 
+	background: #eee8d5; /* base2 */
 
+}
 
+
 
+.token.atrule,
 
+.token.attr-value,
 
+.token.keyword {
 
+	color: #859900; /* green */
 
+}
 
+
 
+.token.function {
 
+	color: #b58900; /* yellow */
 
+}
 
+
 
+.token.regex,
 
+.token.important,
 
+.token.variable {
 
+	color: #cb4b16; /* orange */
 
+}
 
+
 
+.token.important,
 
+.token.bold {
 
+	font-weight: bold;
 
+}
 
+.token.italic {
 
+	font-style: italic;
 
+}
 
+
 
+.token.entity {
 
+	cursor: help;
 
+}

二进制
img/logo_js.png
查看文件


二进制
img/logo_orange_pastille.png
查看文件


+ 24 - 21
index.html
查看文件 

@@ -9,6 +9,7 @@
 
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 
   <link href="css/materialize.css" type="text/css" rel="stylesheet" media="screen,projection"/>
 
   <link href="css/style.css" type="text/css" rel="stylesheet" media="screen,projection"/>
 
+  <link href="css/prism.css" type="text/css" rel="stylesheet" media="screen,projection"/>
 
   <style>
 
     html {
 
       height: 100%;
 
@@ -20,29 +21,37 @@
 
     footer {
 
       position: absolute;
 
       bottom: 0;
 
-      width: 100%;
 
+      width: 50%;
 
     }
 
     .col-1-2 {
 
       width: 50%;
 
       position: absolute;
 
       top: 0;
 
-      bottom: 0;
 
     }
 
     .col-1-2:first-child {
 
-      border-right:1px solid #ddd;
 
+      border-right: 1px solid #ddd;
 
+      bottom: 50px;
 
     }
 
     .col-1-2:last-child {
 
       left: 50%;
 
+      bottom: 0;
 
+    }
 
+    #logo-container img {
 
+      margin-top: 12px;
 
+      max-height: 40px;
 
     }
 
   </style>
 
 
 </head>
 
 <body>
 
     <div class="main">
 
-      <div class="col-1-2">
 
+      <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">WCS</a>
 
+          <div class="nav-wrapper container"><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>
 
             <ul class="right hide-on-med-and-down">
 
               <li><a href="#">Navbar Link</a></li>
 
             </ul>
 
@@ -53,12 +62,6 @@
 
             <a href="#" data-activates="nav-mobile" class="button-collapse"><i class="material-icons">menu</i></a>
 
           </div>
 
         </nav>
 
-        <div class="section no-pad-bot" id="index-banner">
 
-          <div class="container">
 
-            <h4 class="header orange-text">J'apprends le JavaScript !</h4>
 
-          </div>
 
-        </div>
 
-
 
 
         <div class="container">
 
           <div class="section">
 
@@ -68,17 +71,8 @@
 
           </div>
 
         </div>
 
 
-
 
-        <footer class="page-footer orange">
 
-          <div class="footer-copyright">
 
-            <div class="container">
 
-            Made by <a class="orange-text text-lighten-3" href="http://materializecss.com">Materialize</a>
 
-            </div>
 
-          </div>
 
-        </footer>
 
-
 
-
 
       </div>
 
+
 
       <div class="col-1-2">
 
       <iframe
 
         id="iframe"
 
@@ -91,11 +85,20 @@
 
       </div>
 
     </div>
 
 
+    <footer class="page-footer orange" style="padding-top: 0">
 
+      <div class="footer-copyright">
 
+        <div class="container">
 
+        Made by <a class="orange-text text-lighten-3" href="http://materializecss.com">Materialize</a>
 
+        </div>
 
+      </div>
 
+    </footer>
 
+
 
 
   <!--  Scripts-->
 
   <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
 
   <script src="js/materialize.js"></script>
 
   <script src="js/init.js"></script>
 
+  <script src="js/prism.js"></script>
 
   <script src="react-tuto/js/bundle.react.js"></script>
 
   <script>
 
   </script>

文件差异内容过多而无法显示
+ 10 - 0
js/prism.js


+ 4 - 2
react-tuto/gulpfile.js
查看文件 

@@ -63,8 +63,10 @@ function extractMarkdown() {
 
           files,
 
           (carry, f) => fs.readFileAsync('src/markdown/' + dir + '/' + f)
 
             .then(buf => buf.toString())
 
-            .then(content => Object.assign(carry, { [path.basename(f, '.md')]: content })),
 
-          {}
 
+            .then(content => carry.concat({
 
+              title: path.basename(f, '.md'), content
 
+            })),
 
+          []
 
         ))
 
         .then(content => Object.assign(carry, { [dir]: content })),
 
       {}

+ 2 - 23
react-tuto/src/index.js
查看文件 

@@ -23,29 +23,8 @@ class App extends React.Component {
 
   render() {
 
     return (
 
       <div>
 
-        <Page title="pouet" md={"##### Section 1\n\nPouet pouet pouet"} />
 
-        <Page title="pouet" md={markdown.part1.index} />
 
-        <h5 className="header">1. D'abord, un peu de HTML</h5>
 
-        <p>Ouvre le fichier <code>empty.html</code>.</p>
 
-        <p>Tu n'y verras pas grand chose. C'est normal, ça va être à toi de jouer !</p>
 
-        <p>Commence par ajouter du contenu entre les tags <code>&lt;body&gt;</code> et <code>&lt;/body&gt;</code>, sous la section "CONTENU". Un bouton par exemple. Si tu veux un exemple, regarde <a target="_blank" href="https://developer.mozilla.org/fr/docs/Web/HTML/Element/Button#Exemples">ici</a>. Après l'ajout, recharge cette page.</p>
 
-        <p>Tu verras normalement tes ajouts s'afficher sur la moitié droite de l'écran&nbsp;! Passe à l'étape suivante.</p>
 
-
 
-        <h5 className="header">2. Du JavaScript maintenant !</h5>
 
-
 
-        <h6>Hello World!</h6>
 
-        <p>Dans <code>empty.html</code>, ajoute ceci, sous la section "SCRIPTS" :</p>
 
-        <pre>
 
-&lt;script&gt;
 
-alert("Hello World!");
 
-&lt;/script&gt;</pre>
 
-
 
-        <p>Puis recharge. Tu as forcément déjà vu ce genre de "popup". &Ccedil;a le mérite d'exister, même si c'est pas vraiment le top en matière d'UX !</p>
 
-
 
-        <h6>Les variables en JavaScript</h6>
 
-
 
-        <p>Tu connais Java ! Tu sais donc qu'en Java, les variables sont <strong>typées</strong>.</p>
 
-
 
+        <Page title={markdown.part1[0].title} md={markdown.part1[0].content} />
 
+        <Page title={markdown.part1[1].title} md={markdown.part1[1].content} />
 
       </div>
 
 
     );

文件差异内容过多而无法显示
+ 1 - 1
react-tuto/src/markdown.json


+ 12 - 0
react-tuto/src/markdown/part1/1. D'abord un peu de HTML.md
查看文件 

@@ -0,0 +1,12 @@
 
+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.
 
+
 
+Tu verras normalement tes ajouts s'afficher sur la moitié droite de l'écran&nbsp;! Passe à l'étape suivante.
 
+
 
+
 
+```javascript
 
+alert('toto');
 
+```

+ 16 - 0
react-tuto/src/markdown/part1/2. Du JavaScript maintenant.md
查看文件 

@@ -0,0 +1,16 @@
 
+##### Hello World!
 
+
 
+Dans `empty.html`, ajoute ceci, sous la section "SCRIPTS" :
 
+```html      
+<script>
 
+alert("Hello World!");
 
+</script>
 
+```
 
+
 
+Puis recharge. Tu as forcément déjà vu ce genre de "popup".
 
+
 
+&Ccedil;a a le mérite d'exister, même si c'est pas vraiment le top en matière d'UX !
 
+
 
+##### Les variables en JavaScript
 
+
 
+Tu connais Java ! Tu sais donc qu'en Java, les variables sont **typées**.

+ 0 - 5
react-tuto/src/markdown/part1/index.md
查看文件 

@@ -1,5 +0,0 @@
 
-# Markdown
 
-
 
-```javascript
 
-alert('toto');
 
-```