Ajout base formation Javascript
This commit is contained in:
parent
1411a3349c
commit
708e54482b
|
|
@ -0,0 +1,7 @@
|
|||
root = true
|
||||
|
||||
[*]
|
||||
charset = utf-8
|
||||
indent_style = space
|
||||
indent_size = 2
|
||||
trim_trailing_whitespace = true
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
# Formations Javascript
|
||||
|
||||
Les formations Javascript sont au format HTML et utilisent la librairie [remark](https://github.com/gnab/remark).
|
||||
|
||||
## Générer le PDF de la formation
|
||||
|
||||
Utiliser le script `generate-pdf.sh`
|
||||
|
||||
## Visualiser une des formations
|
||||
|
||||
```
|
||||
cd formations
|
||||
python -m SimpleHTTPServer
|
||||
```
|
||||
|
||||
Puis ouvrir votre navigateur sur l'adresse `http://localhost:8080/javascript/<formation>`
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
# .cadoles-blue[Formation Javascript]
|
||||
|
||||
## .cadoles-blue[EOLE]
|
||||
### William Petit
|
||||
<img style="height: 30px" src=../../beamer-skel/img/logo-cadoles-01.png />
|
||||
### 02 Avril 2015
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
# .cadoles-slide-title[Fonctions (1/3)]
|
||||
.cadoles-clearfix[
|
||||
**Déclaration et invocation**
|
||||
]
|
||||
```js
|
||||
// Déclaration
|
||||
function myFunc() {
|
||||
return 'Hello from myFunc';
|
||||
}
|
||||
|
||||
var myFunc2 = function() {
|
||||
return 'Hello from myFunc2';
|
||||
};
|
||||
|
||||
// Invocation
|
||||
myFunc(); // -> 'Hello from myFunc'
|
||||
myFunc2(); // -> 'Hello from myFunc2'
|
||||
```
|
||||
**Arguments**
|
||||
|
||||
Comme les variables, les arguments d'une fonction en Javascript ne sont pas typés, et leur nombre n'est pas fixe.
|
||||
```js
|
||||
function myFunc(arg1, arg2) {
|
||||
console.log(arg1, arg2);
|
||||
}
|
||||
|
||||
myFunc('foo', 'bar'); // -> affiche 'foo bar' dans la console;
|
||||
myFunc('foo', 'bar', 'baz'); // Pas d'erreur
|
||||
```
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
# .cadoles-slide-title[Fonctions (2/3)]
|
||||
|
||||
.cadoles-clearfix[
|
||||
**La variable `arguments`**
|
||||
]
|
||||
|
||||
Dans le contexte d'exécution d'un fonction, la variable `arguments` permet de manipuler les arguments, même si ceux ci n'ont pas été déclarés par la fonction.
|
||||
```js
|
||||
function myFunc() {
|
||||
console.log(arguments.length, arguments[0], arguments[1]);
|
||||
}
|
||||
|
||||
myFunc('arg1', 'arg2'); // Affiche '2 "arg1" "arg2"' dans la console
|
||||
myFunc(); // Affiche '0 undefined undefined' dans la console
|
||||
```
|
||||
**Contexte d'exécution et `this`**
|
||||
|
||||
En Javascript, le mot clé `this` permet d'obtenir une référence vers le contexte d'exécution.
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
# .cadoles-slide-title[Fonctions (3/3)]
|
||||
|
||||
.cadoles-clearfix[
|
||||
**"Levage" de fonctions**
|
||||
]
|
||||
```js
|
||||
|
||||
```
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
# .cadoles-slide-title[Historique]
|
||||
|
||||
.cadoles-list.cadoles-clearfix[
|
||||
|
||||
- Créé en 1995 par [Brendan Eich](https://fr.wikipedia.org/wiki/Brendan_Eich) pour [Netscape](https://fr.wikipedia.org/wiki/Netscape_Communications);
|
||||
- Normalisé par le standard [ECMAScript](https://fr.wikipedia.org/wiki/ECMAScript) en juin 1997;
|
||||
- Actuellement en version 1.8.5, implémentant la version 5 de la norme ECMA-262;
|
||||
- La version 6 de la norme ECMA-262 devrait sortir à la mi 2015.
|
||||
|
||||
]
|
||||
|
||||
.cadoles-list[
|
||||
|
||||
- Premier langage en terme de volume de dépôts créés sur [Github](https://github.com/) (d'après [Githut.info](http://githut.info/)).
|
||||
|
||||
]
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Cadoles - Formation Javascript</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
|
||||
<style type="text/css">
|
||||
@import url(http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz);
|
||||
@import url(http://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic);
|
||||
@import url(http://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700,400italic);
|
||||
|
||||
body {
|
||||
font-family: 'Droid Sans';
|
||||
}
|
||||
h1, h2, h3 {
|
||||
font-family: 'Caviar Dream', 'Droid Sans';
|
||||
font-weight: normal;
|
||||
}
|
||||
.remark-code, .remark-inline-code { font-family: 'Ubuntu Mono'; }
|
||||
</style>
|
||||
<link href="../cadoles-theme.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<script src="../bower_components/remark/out/remark.js"></script>
|
||||
<script src="../cadoles-remark-macros.js"></script>
|
||||
<script type="text/javascript">
|
||||
var slideshow = remark.create({
|
||||
sourceUrl: 'index.md'
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
class: middle, center
|
||||
|
||||
---
|
||||
|
||||
---
|
||||
|
||||
---
|
||||
|
||||
---
|
||||
|
||||
---
|
||||
|
||||
---
|
||||
|
||||
---
|
||||
|
||||
---
|
||||
|
||||
---
|
||||
|
||||
---
|
||||
|
||||
---
|
||||
|
||||
---
|
||||
|
||||
---
|
||||
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
# .cadoles-slide-title[Le langage]
|
||||
|
||||
.cadoles-list.cadoles-clearfix[
|
||||
- Variables
|
||||
- Structures de contrôles
|
||||
- Fonctions
|
||||
- Tableaux
|
||||
- Objets
|
||||
]
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
# .cadoles-slide-title[Plan]
|
||||
|
||||
.cadoles-list.cadoles-clearfix[
|
||||
|
||||
- Historique
|
||||
- Le langage
|
||||
- L'héritage prototypal
|
||||
- Modularisation
|
||||
- L'écosystème Javascript
|
||||
- Les alternatives
|
||||
|
||||
]
|
||||
|
||||
???
|
||||
|
||||
## Plan complet
|
||||
|
||||
- Historique
|
||||
- Le langage
|
||||
- Variables
|
||||
- Structures de contrôles
|
||||
- Fonctions
|
||||
- Tableaux
|
||||
- Objets
|
||||
- L'héritage prototypal
|
||||
- Modularisation
|
||||
- État des lieux
|
||||
- Variable globale
|
||||
- AMD
|
||||
- CommonJS
|
||||
- Modules ES6
|
||||
- L'écosystème Javascript
|
||||
- Outils de debug
|
||||
- Console de débogage
|
||||
- Tests unitaires
|
||||
- Linting
|
||||
- `'use strict';`
|
||||
- Gestionnaires de paquets
|
||||
- Pipeline d'intégration
|
||||
- Grunt
|
||||
- Gulp
|
||||
- Les alternatives
|
||||
- CoffeeScript
|
||||
- Dart
|
||||
- TypeScript
|
||||
- Haxe
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
# .cadoles-slide-title[ Structures de contrôle (1/3) ]
|
||||
|
||||
.cadoles-clearfix[
|
||||
**Tests et conditions**
|
||||
]
|
||||
```js
|
||||
// Opérateurs de comparaison: <, >, >=, <=, ==, ===, !=, !==
|
||||
|
||||
var test = 1;
|
||||
|
||||
if(test < 1) {
|
||||
console.log('test est strictement inférieur à 1');
|
||||
} else if(test > 1) {
|
||||
console.log('test est strictement supérieur à 2');
|
||||
} else {
|
||||
console.log('test est égal à 1');
|
||||
}
|
||||
|
||||
test = 'foo';
|
||||
|
||||
switch(test) {
|
||||
case 'foo':
|
||||
console.log('foo !');
|
||||
break;
|
||||
case 'bar':
|
||||
console.log('bar !');
|
||||
break;
|
||||
default:
|
||||
console.log('default !');
|
||||
}
|
||||
```
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
# .cadoles-slide-title[Structures de contrôle (2/3)]
|
||||
|
||||
.cadoles-clearfix[
|
||||
**Tests, transitivité, égalité stricte et petites subtilités**
|
||||
]
|
||||
```js
|
||||
var test;
|
||||
|
||||
test = 1 == '1'; // -> true
|
||||
test = 1 === '1'; // -> false
|
||||
|
||||
test = 0 == false; // -> true
|
||||
test = 0 === false; // -> false
|
||||
|
||||
test = 1 == true; // -> true
|
||||
test = 1 === true; // -> false
|
||||
|
||||
test = '' == false; // -> true
|
||||
test = '' === false; // -> false
|
||||
|
||||
test = [] == false; // -> true
|
||||
test = [] === false; // -> false
|
||||
|
||||
test = undefined == null; // -> true
|
||||
test = undefined == false; // -> false
|
||||
test = NaN == NaN; // -> false
|
||||
```
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
# .cadoles-slide-title[Structures de contrôle (3/3)]
|
||||
|
||||
.cadoles-clearfix[
|
||||
**Itérations**
|
||||
]
|
||||
```js
|
||||
for(var i = 0; i < 5; i++) {
|
||||
console.log(i);
|
||||
}
|
||||
|
||||
var j = 5;
|
||||
|
||||
while(j > 0) {
|
||||
console.log('Loop:', j);
|
||||
j -= 1;
|
||||
}
|
||||
|
||||
j = 0;
|
||||
|
||||
do {
|
||||
console.log('Loop:', j);
|
||||
j += 1;
|
||||
} while(j < 5);
|
||||
|
||||
```
|
||||
** Instructions de contrôle des boucles **
|
||||
- `break;` Sort de la boucle
|
||||
- `continue;` Interromp la boucle et passe à l'itération suivante
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
# .cadoles-slide-title[Tableaux (1/2)]
|
||||
|
||||
.cadoles-clearfix[
|
||||
**Différentes notations**
|
||||
]
|
||||
```js
|
||||
var arr = [1, 2, 3]; // A préférer
|
||||
arr = new Array(1, 2, 3);
|
||||
|
||||
// Attention !
|
||||
arr = new Array(3); // -> [undefined, undefined, undefined]
|
||||
```
|
||||
**Manipulation d'un tableau**
|
||||
```js
|
||||
var arr = [1, 2, 3];
|
||||
|
||||
// Propriétés
|
||||
arr.length // -> 3
|
||||
arr[0] // -> 1
|
||||
|
||||
// Méthodes (liste non exhaustive)
|
||||
arr.push(4); // -> [1, 2, 3, 4]
|
||||
arr.pop(); // -> [1, 2, 3]
|
||||
arr.unshift(0); // -> [0, 1, 2, 3]
|
||||
arr.shift(); // -> [1, 2, 3]
|
||||
arr.indexOf(2) // -> 1
|
||||
arr = [2, 3, 1];
|
||||
arr.sort(); // -> [1, 2, 3]
|
||||
arr.join(', '); // -> '1, 2, 3'
|
||||
```
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
# .cadoles-slide-title[Tableaux (2/2)]
|
||||
|
||||
.cadoles-clearfix[
|
||||
**Méthodes de parcours et transformations**
|
||||
]
|
||||
```js
|
||||
var arr = [1, 2, 3];
|
||||
|
||||
// Traverser le tableau
|
||||
arr.forEach(function(item, index) {
|
||||
console.log('Item:', item, 'Index:', index);
|
||||
});
|
||||
|
||||
// Transformer un tableau
|
||||
var square = arr.map(function(item, index) {
|
||||
return item*item;
|
||||
}); // -> [1, 4, 9]
|
||||
|
||||
// Réduire un tableau
|
||||
var sum = arr.reduce(function(memo, item, index) {
|
||||
return memo+item;
|
||||
}, 0); // -> 6
|
||||
```
|
||||
**Exercice**
|
||||
```js
|
||||
var arr = [15, 20, 15, 16, -1, 4];
|
||||
|
||||
var max = arr.??(function(??) {
|
||||
??
|
||||
}, ??);
|
||||
|
||||
console.log(max); // -> 20
|
||||
```
|
||||
???
|
||||
|
||||
Solution Exo
|
||||
```js
|
||||
var arr = [15, 20, 15, 16, -1, 4];
|
||||
|
||||
var max = arr.reduce(function(memo, item, index) {
|
||||
if(!memo) {
|
||||
memo = item;
|
||||
} else if(item >= memo) {
|
||||
memo = item;
|
||||
}
|
||||
return memo;
|
||||
});
|
||||
```
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
# .cadoles-slide-title[Variables (1/2)]
|
||||
|
||||
.cadoles-clearfix[
|
||||
Javascript est un langage **faiblement typé**.
|
||||
]
|
||||
```js
|
||||
var foo; // Une variable peut être déclarée, avec ou sans valeur
|
||||
var bar = 'hello world !';
|
||||
|
||||
// Elle peut changer de type de valeur en cours d'exécution
|
||||
bar = 5
|
||||
|
||||
// Incrémentation...
|
||||
|
||||
bar += 1; // -> 6
|
||||
bar -= 2; // -> 4
|
||||
|
||||
// ... ou concaténation
|
||||
bar = 'hello';
|
||||
bar += ' world !';
|
||||
console.log(bar); // -> 'hello world !'
|
||||
|
||||
```
|
||||
**À votre avis ?**
|
||||
```js
|
||||
var foo = 'foo';
|
||||
foo += 1;
|
||||
console.log(foo) // Résultat ?
|
||||
|
||||
var bar = 'bar';
|
||||
bar -= 1;
|
||||
console.log(bar) // Résultat ?
|
||||
```
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
# .cadoles-slide-title[Variables (2/2)]
|
||||
|
||||
.cadoles-clearfix[
|
||||
**Types**
|
||||
]
|
||||
```js
|
||||
var foo;
|
||||
|
||||
// Types primaires
|
||||
|
||||
foo = 0; // Number, pas de distinction entre nombres flottants ou entiers
|
||||
foo = 'baz'; // String, peut être délimité par ' ou ", pas de signification particulière
|
||||
foo = true; // Boolean
|
||||
|
||||
// Types composites
|
||||
|
||||
foo = { prop1: 'World' }; // Object
|
||||
foo = [1, 2, 3]; // Array
|
||||
|
||||
// Types spéciaux
|
||||
|
||||
foo = undefined;
|
||||
foo = null;
|
||||
foo = NaN;
|
||||
```
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
{
|
||||
"name": "javascript",
|
||||
"version": "0.0.0",
|
||||
"authors": [
|
||||
"William Petit <wpetit@cadoles.com>"
|
||||
],
|
||||
"license": "CC BY-NC-SA 2.0",
|
||||
"homepage": "https://www.cadoles.com/wordpress/formations/",
|
||||
"private": true,
|
||||
"ignore": [
|
||||
"**/.*",
|
||||
"node_modules",
|
||||
"bower_components",
|
||||
"test",
|
||||
"tests"
|
||||
],
|
||||
"dependencies": {
|
||||
"remark": "~0.10.2"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
{
|
||||
"name": "remark",
|
||||
"homepage": "http://remarkjs.com/",
|
||||
"authors": [
|
||||
"Ole Petter Bang <olepbang@gmail.com>"
|
||||
],
|
||||
"description": "A simple, in-browser, markdown-driven slideshow tool.",
|
||||
"main": "out/remark.js",
|
||||
"keywords": [
|
||||
"Markdown",
|
||||
"Slides"
|
||||
],
|
||||
"license": "MIT",
|
||||
"ignore": [
|
||||
".gitignore",
|
||||
".gitmodules",
|
||||
".jshintignore",
|
||||
".jshintrc",
|
||||
"HISTORY.md",
|
||||
"LICENSE",
|
||||
"make.js",
|
||||
"Makefile",
|
||||
"package.json",
|
||||
"bower_components",
|
||||
"node_modules",
|
||||
"src",
|
||||
"test",
|
||||
"vendor",
|
||||
"out/tests.js"
|
||||
],
|
||||
"version": "0.10.2",
|
||||
"_release": "0.10.2",
|
||||
"_resolution": {
|
||||
"type": "version",
|
||||
"tag": "v0.10.2",
|
||||
"commit": "359f491fae0e53b2e8102b6a264a236fc28b5480"
|
||||
},
|
||||
"_source": "https://github.com/gnab/remark.git",
|
||||
"_target": "~0.10.2",
|
||||
"_originalSource": "remark",
|
||||
"_direct": true
|
||||
}
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
language: node_js
|
||||
node_js:
|
||||
- "0.10"
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
Copyright (c) 2011-2013 Ole Petter Bang <olepbang@gmail.com>
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining
|
||||
a copy of this software and associated documentation files (the
|
||||
'Software'), to deal in the Software without restriction, including
|
||||
without limitation the rights to use, copy, modify, merge, publish,
|
||||
distribute, sublicense, and/or sell copies of the Software, and to
|
||||
permit persons to whom the Software is furnished to do so, subject to
|
||||
the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be
|
||||
included in all copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND,
|
||||
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
|
||||
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
|
||||
IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
|
||||
CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
|
||||
TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
|
||||
SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
||||
|
|
@ -0,0 +1,116 @@
|
|||
# remark
|
||||
|
||||
[](https://travis-ci.org/gnab/remark)
|
||||
|
||||
A simple, in-browser, markdown-driven slideshow tool targeted at people who know their way around HTML and CSS, featuring:
|
||||
|
||||
- Markdown formatting, with smart extensions
|
||||
- Presenter mode, with cloned slideshow view
|
||||
- Syntax highlighting, supporting a range of languages
|
||||
- Slide scaling, thus similar appearance on all devices / resolutions
|
||||
- Touch support for smart phones and pads, i.e. swipe to navigate slides
|
||||
|
||||
Check out [this remark slideshow](http://gnab.github.com/remark) for a brief introduction.
|
||||
|
||||
To render your Markdown-based slideshow on the fly, checkout [Remarkise](https://gnab.github.io/remark/remarkise).
|
||||
|
||||
### Getting Started
|
||||
|
||||
It takes only a few, simple steps to get up and running with remark:
|
||||
|
||||
1. Create a HTML file to contain your slideshow (see below)
|
||||
2. Open the HTML file in a decent browser
|
||||
3. Edit the Markdown and/or CSS styles as needed, save and refresh!
|
||||
|
||||
Below is a boilerplate HTML file to get you started:
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Title</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
|
||||
<style type="text/css">
|
||||
@import url(https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz);
|
||||
@import url(https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic);
|
||||
@import url(https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700,400italic);
|
||||
|
||||
body { font-family: 'Droid Serif'; }
|
||||
h1, h2, h3 {
|
||||
font-family: 'Yanone Kaffeesatz';
|
||||
font-weight: normal;
|
||||
}
|
||||
.remark-code, .remark-inline-code { font-family: 'Ubuntu Mono'; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<textarea id="source">
|
||||
|
||||
class: center, middle
|
||||
|
||||
# Title
|
||||
|
||||
---
|
||||
|
||||
# Agenda
|
||||
|
||||
1. Introduction
|
||||
2. Deep-dive
|
||||
3. ...
|
||||
|
||||
---
|
||||
|
||||
# Introduction
|
||||
|
||||
</textarea>
|
||||
<script src="https://gnab.github.io/remark/downloads/remark-latest.min.js">
|
||||
</script>
|
||||
<script>
|
||||
var slideshow = remark.create();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
### Moving On
|
||||
|
||||
For more information on using remark, please check out the [wiki](http://github.com/gnab/remark/wiki) pages.
|
||||
|
||||
### Real-world remark slideshows
|
||||
|
||||
On using remark:
|
||||
|
||||
- [The Official remark Slideshow](http://gnab.github.com/remark)
|
||||
- [Coloured Terminal Listings in remark](http://joshbode.github.com/remark/ansi.html) by [joshbode](https://github.com/joshbode)
|
||||
|
||||
Other interesting stuff:
|
||||
|
||||
- [gnab.github.com/editorjs](http://gnab.github.com/editorjs)
|
||||
- [judoole.github.com/GroovyBDD](http://judoole.github.com/GroovyBDD)
|
||||
- [kjbekkelund.github.com/nith-coffeescript](http://kjbekkelund.github.com/nith-coffeescript)
|
||||
- [kjbekkelund.github.com/js-architecture-backbone](http://kjbekkelund.github.com/js-architecture-backbone)
|
||||
- [bekkopen.github.com/infrastruktur-som-kode](http://bekkopen.github.com/infrastruktur-som-kode)
|
||||
- [ivarconr.github.com/Test-Driven-Web-Development/slides](http://ivarconr.github.com/Test-Driven-Web-Development/slides)
|
||||
- [havard.github.com/node.js-intro-norwegian](http://havard.github.com/node.js-intro-norwegian)
|
||||
- [mobmad.github.com/js-tdd-erfaringer](http://mobmad.github.com/js-tdd-erfaringer)
|
||||
- [torgeir.github.com/busterjs-lightning-talk](http://torgeir.github.com/busterjs-lightning-talk)
|
||||
- [roberto.github.com/ruby-sinform-2012](http://roberto.github.com/ruby-sinform-2012)
|
||||
- [http://asmeurer.github.io/python3-presentation/slides.html](http://asmeurer.github.io/python3-presentation/slides.html)
|
||||
|
||||
### Other systems integrating with remark
|
||||
|
||||
- [http://platon.io](http://platon.io)
|
||||
- [http://markdowner.com](http://markdowner.com)
|
||||
- [http://remarks.sinaapp.com](http://remarks.sinaapp.com/)
|
||||
|
||||
### Credits
|
||||
|
||||
- [torgeir](http://github.com/torgeir), for invaluable advice and feedback.
|
||||
- [kjbekkelund](https://github.com/kjbekkelund), for numerous pull requests.
|
||||
- [gureckis](https://github.com/gureckis), for several pull requests.
|
||||
- [freakboy3742](https://github.com/freakboy3742), for several pull requests.
|
||||
|
||||
### License
|
||||
|
||||
remark is licensed under the MIT license. See LICENSE for further
|
||||
details.
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>My Awesome Presentation</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
|
||||
<style type="text/css">
|
||||
@import url(http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz);
|
||||
@import url(http://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic);
|
||||
@import url(http://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700,400italic);
|
||||
|
||||
body { font-family: 'Droid Serif'; }
|
||||
h1, h2, h3 {
|
||||
font-family: 'Yanone Kaffeesatz';
|
||||
font-weight: normal;
|
||||
}
|
||||
.remark-code, .remark-inline-code { font-family: 'Ubuntu Mono'; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<textarea id="source">
|
||||
|
||||
class: center, middle
|
||||
|
||||
# My Awesome Presentation
|
||||
|
||||
???
|
||||
|
||||
Notes for the _first_ slide!
|
||||
|
||||
---
|
||||
|
||||
# Agenda
|
||||
|
||||
1. Introduction
|
||||
2. Deep-dive
|
||||
3. ...
|
||||
|
||||
[NOTE]: Note that you need remark.js alongside this html file, but no internet connection.
|
||||
---
|
||||
|
||||
# Introduction
|
||||
|
||||
</textarea>
|
||||
<script src="out/remark.js" type="text/javascript">
|
||||
</script>
|
||||
<script type="text/javascript">
|
||||
var slideshow = remark.create();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>My Awesome Presentation</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
|
||||
<style type="text/css">
|
||||
@import url(http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz);
|
||||
@import url(http://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic);
|
||||
@import url(http://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700,400italic);
|
||||
|
||||
body { font-family: 'Droid Serif'; }
|
||||
h1, h2, h3 {
|
||||
font-family: 'Yanone Kaffeesatz';
|
||||
font-weight: normal;
|
||||
}
|
||||
.remark-code, .remark-inline-code { font-family: 'Ubuntu Mono'; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<textarea id="source">
|
||||
|
||||
class: center, middle
|
||||
|
||||
# My Awesome Presentation
|
||||
|
||||
---
|
||||
|
||||
# Agenda
|
||||
|
||||
1. Introduction
|
||||
2. Deep-dive
|
||||
3. ...
|
||||
|
||||
[NOTE]: Note that you need active internet connection to access remark.js script file
|
||||
---
|
||||
|
||||
# Introduction
|
||||
|
||||
</textarea>
|
||||
<script src="http://gnab.github.io/remark/downloads/remark-0.5.9.min.js" type="text/javascript">
|
||||
</script>
|
||||
<script type="text/javascript">
|
||||
var slideshow = remark.create();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,31 @@
|
|||
{
|
||||
"name": "remark",
|
||||
"homepage": "http://remarkjs.com/",
|
||||
"authors": [
|
||||
"Ole Petter Bang <olepbang@gmail.com>"
|
||||
],
|
||||
"description": "A simple, in-browser, markdown-driven slideshow tool.",
|
||||
"main": "out/remark.js",
|
||||
"keywords": [
|
||||
"Markdown",
|
||||
"Slides"
|
||||
],
|
||||
"license": "MIT",
|
||||
"ignore": [
|
||||
".gitignore",
|
||||
".gitmodules",
|
||||
".jshintignore",
|
||||
".jshintrc",
|
||||
"HISTORY.md",
|
||||
"LICENSE",
|
||||
"make.js",
|
||||
"Makefile",
|
||||
"package.json",
|
||||
"bower_components",
|
||||
"node_modules",
|
||||
"src",
|
||||
"test",
|
||||
"vendor",
|
||||
"out/tests.js"
|
||||
]
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,10 @@
|
|||
(function() {
|
||||
|
||||
remark.macros.include = function() {
|
||||
var req = new XMLHttpRequest();
|
||||
req.open('GET', this, false);
|
||||
req.send();
|
||||
return remark.convert(req.responseText.replace(/\r\n/g, '\n'));
|
||||
};
|
||||
|
||||
}());
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
/* Thème Cadoles */
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
ul li:before {
|
||||
content: "\25B8 ";
|
||||
color: #5379B4;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
ul > li {
|
||||
line-height: 1.5em;
|
||||
}
|
||||
|
||||
.remark-slide-content {
|
||||
background-image: url('../beamer-skel/img/banner01.png'), url('../beamer-skel/img/logo-cadoles-01.png');
|
||||
background-position: top center, center 98% !important;
|
||||
background-size: contain, 150px !important;
|
||||
}
|
||||
|
||||
.remark-code-line {
|
||||
font-size: 0.85em;
|
||||
}
|
||||
|
||||
.cadoles-slide-title {
|
||||
color: white;
|
||||
float: left;
|
||||
clear: right;
|
||||
font-size: 50px;
|
||||
margin-top: -40px;
|
||||
margin-left: -50px;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
.cadoles-slide-title:after {
|
||||
content: '';
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.cadoles-blue { color: #5379B4; }
|
||||
.cadoles-clearfix { clear: both; }
|
||||
.cadoles-list > ul { font-size: 1.5em; }
|
||||
.cadoles-list > ul ul { font-size: 1em; }
|
||||
.cadoles-small { font-size: 0.8em; }
|
||||
.cadoles-xs { font-size: 0.7em; }
|
||||
Loading…
Reference in New Issue