# Un modèle de diaporama sur CodiMD Cédric Eyssette (2022-2023) https://eyssette.github.io/ --- ## Usages classiques <span>Texte mis en forme, listes & apparition progressive d'éléments</span> --- ### Utilisation du markdown <br/>pour la mise en forme --- Lorem ipsum dolor sit amet, consectetur adipiscing elit. _Aliquam fringilla condimentum tellus_, porttitor porta elit egestas ut. Sed viverra ==consequat magna, quis tempor nisl placerat sed==. :warning: Sed hendrerit risus sit amet lacinia sodales. ++Nunc sollicitudin libero ac velit feugiat auctor++. Nullam tincidunt quam est. ^Exposant^ ~indice~ Note: On peut mettre des notes dans une diapo. Ces notes ne seront visibles que si on appuie sur la touche "S" pour activer le mode "speaker" --- >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam fringilla condimentum tellus, porttitor porta elit egestas ut. Sed viverra consequat magna, quis tempor nisl placerat sed. Sed hendrerit risus sit amet lacinia sodales. Nunc sollicitudin libero ac velit feugiat auctor. Nullam tincidunt quam est. Integer convallis nibh non erat efficitur, sit amet mollis eros commodo. Cras bibendum libero purus, in vulputate mi gravida eu. In pharetra purus non orci egestas, vel interdum lacus malesuada. Ut nec sapien rutrum, pharetra urna ultricies, gravida mi. Phasellus luctus massa elit, in laoreet elit auctor in. --- - Lorem ipsum dolor sit amet, **consectetur** adipiscing elit. - Lorem ipsum dolor sit amet, **consectetur** adipiscing elit. - Lorem ipsum dolor sit amet, **consectetur** adipiscing elit. 1. Lorem ipsum dolor sit amet, **consectetur** adipiscing elit. 2. Lorem ipsum dolor sit amet, **consectetur** adipiscing elit. --- ### Utilisation de `class="fragment"` pour faire apparaître<br/>progressivement des éléments --- Lorem ipsum dolor sit amet, **consectetur** adipiscing elit. <span class="fragment">Aliquam fringilla _condimentum tellus_, porttitor porta elit egestas ut.</span> <span class="fragment">Sed viverra consequat magna, quis tempor nisl placerat sed. Sed hendrerit risus sit amet lacinia sodales.</span> <span class="fragment">Nunc sollicitudin libero ac velit feugiat auctor. Nullam tincidunt quam est. </span> --- ## Images --- ### Une image centrée, <br/>pas de texte ---  --- ### Une image de fond, <br/>pas de texte --- <!-- .slide: data-state="i1t0b" -->  --- ### Une image de fond, <br/>du texte au-dessus --- <!-- .slide: data-state="i1t1f" -->  Texte devant l'image --- ### Une image à gauche, <br/>un texte à droite --- <!-- .slide: data-state="i1t1r" -->  Texte à droite de l'image --- ### Une image à droite, <br/>un texte à gauche --- <!-- .slide: data-state="i1t1l" --> Texte à gauche de l'image  --- ### Une image en haut, <br/>un texte en bas --- <!-- .slide: data-state="i1t1b" -->  Texte en bas de l'image --- ### Une image en bas, <br/>un texte en haut --- <!-- .slide: data-state="i1t1t" --> Texte en haut de l'image  --- ### Deux images --- <!-- .slide: data-state="i2t0" -->   --- ## Usages plus avancés --- ### Citations --- <!-- .slide: data-state="citation" -->  >« Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam fringilla condimentum tellus, porttitor porta elit egestas ut. Sed viverra consequat magna, quis tempor nisl placerat sed. Sed hendrerit risus sit amet lacinia sodales. Nunc sollicitudin libero ac velit feugiat auctor. Nullam tincidunt quam est. Integer convallis nibh non erat efficitur, sit amet mollis eros commodo. Cras bibendum libero purus, in vulputate mi gravida eu. In pharetra purus non orci egestas, vel interdum lacus malesuada. Ut nec sapien rutrum, pharetra urna ultricies, gravida mi. Phasellus luctus massa elit, in laoreet elit auctor in. » --- ### Schémas --- #### Un schéma avec markmap ```markmap # markmap-lib ## Links - Test - [GitHub](https://github.com/gera2ld/markmap-lib) ## Related - [coc-markmap](https://github.com/gera2ld/coc-markmap) - [gatsby-remark-markmap](https://github.com/gera2ld/gatsby-remark-markmap) ## Features - links - **inline** ~~text~~ *styles* - multiline text ``` --- #### Un schéma avec Mermaid ```mermaid %%{init{"theme":"base","themeCSS":"* {line-height:1.25em!important; font-size:1em!important; text-align:left!important;} g[id*=\"A\"] span {font-size:1.01em; color:white; display:block; text-align:center!important} g[id*=\"A\"] rect {fill:black} g[id*=\"V\"] * {} g[id*=\"B\"] span {font-size:0.9em; color:white; display:block; text-align:center!important} g[id*=\"B\"] rect {fill:#6f0000; stroke:transparent} g[id*=\"C\"] rect {fill:white; stroke:grey} g[id*=\"C\"] span {font-size:0.75em; display:block;} g[id*=\"D\"] span, g[id*=\"E\"] span {font-size:0.7em; display:block;} g[id*=\"D\"] rect, g[id*=\"E\"] rect {stroke:transparent!important}.edge-thickness-normal{stroke-width:1px; stroke:#999;} .edge-thickness-thick{stroke-width:1px!important;} .edge-pattern-dotted{stroke:transparent} span {font-size:2em!important; display:flex!important; justify-content:center!important; align-items:center!important; height:inherit!important; width:inherit!important;} g div {height:inherit!important;width:inherit!important;}","themeVariables":{"secondaryColor":"white","primaryColor":"hsl(60,9%,97%)","primaryBorderColor":"black"},"flowchart":{"htmlLabels":true,"padding":10,"rankSpacing":50,"nodeSpacing":20}} }%% flowchart LR A1(["Titre <br> niveau 1"]) B1("Titre niveau 2") B2("Titre <br>niveau 2") B3("Titre <br>niveau 2") C1["Titre <br>niveau 3"] C2["Titre <br>niveau 3"] C3["Titre <br>niveau 3"] D1("Titre <br>niveau 4") D2("Titre <br>niveau 4") D3("Titre <br>niveau 4") A1 === B1 & B2 & B3 B1 --- C1 B2 --- C2 B3 --- C3 C1 --- D1 C2 --- D2 C3 --- D3 ``` --- ### Blocs de couleur --- :::success #### Titre Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam fringilla condimentum tellus, porttitor porta elit egestas ut. ::: --- :::info #### Titre Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam fringilla condimentum tellus, porttitor porta elit egestas ut. ::: --- :::danger #### Titre Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam fringilla condimentum tellus, porttitor porta elit egestas ut. ::: --- :::warning #### Titre Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam fringilla condimentum tellus, porttitor porta elit egestas ut. ::: --- ### Flashcards --- <!-- .slide: data-state="flashcard" --> **Flashcard** 1. - Question - Réponse <!--  --> <style> .container, .reveal {background-color:black!important;} .slides {background-color: #f5f5f5; overflow:hidden!important} svg, pre.mermaid {background-color:transparent; box-shadow:none!important} .slides h1 {padding:0.3em; font-family:Arial; background-color:#133E29; color:white; font-size:2em!important} .slides h1+p {background-color:#DDD!important; width:60%; margin:auto; border-radius:15px; padding:0.3em; margin-top:1.2em!important;} .slides h2 {font-size:1.8em; padding-left:0.4em; padding-right:0.4em; background-color:#371212; color:#EEE; display:flex; align-items:center;justify-content:center; flex-direction:column; height:720px!important; margin:0!important; margin-top:-20px!important} .slides h2 span {font-size:0.7em; margin-top:0.5em; padding-left:0.4em; padding-right:0.4em} .slides h3 {background:#131750 ; padding : 1.5em 0.2em; color:white} .slides h4 {margin-bottom:1.5em} blockquote {font-family: "ETBembo", "et-book", "Minion Pro", "Times New Roman";border:none!important;background-color:#00000009!important;padding:20px;border-radius:15px;box-shadow:none!important; width:85%!important} blockquote p {font-style:normal; font-size:0.8em; line-height:1.25em!important; text-align:justify!important; color:black} img {max-height:720px; max-width:960px; border:none!important; box-shadow:none!important} pre {box-shadow:none!important} .emoji {max-height:1em!important; height:0.9em; width:0.9em; margin-top:-0.3em!important} mark {background-color:#fcf8e3!important} .slides p {text-align:justify; padding-left:1em; padding-right:1em;} .slides p strong, .slides li strong{color:rgb(24, 33, 117)} .slides li {text-align:justify; padding-right:1em} .slides ul, .slides ol {margin-top:0.5em} .reveal blockquote p:first-child, .reveal blockquote p:last-child {display:block;} section[data-state="i1t0b"] img , section[data-state="i1t1f"] img{display:block!important; width: 965px!important; height: 725px!important; margin: 0!important; padding: 0; border: none!important; max-width: none!important; max-height: none!important; margin-left:-1em!important; margin-top:-1em!important; object-fit:cover!important} section[data-state="i1t0"] div {margin:0; margin-top:-0.49em} section[data-state="i1t0"] p {margin:auto; display:flex; align-items:center; justify-content:center;} section[data-state="i1t0"] img {max-height:720px!important; max-width:960px!important; margin:0} section[data-state="i1t1f"] div *:nth-of-type(2) {position:absolute; color:white; top:0; left:0; background-color:rgba(0,0,0,80%)} section[data-state="i1t1l"] div, section[data-state="i1t1r"] div {display:flex; flex-direction:row; margin-top:-1em} section[data-state="i1t1r"] div *:nth-of-type(2) {display:flex; align-items: center;} section[data-state="i1t1l"] div *:nth-of-type(1) {display:flex;align-items: center;} section[data-state="i1t1b"] div, section[data-state="i1t1t"] div {display:flex; flex-direction:column;} section[data-state="i1t1b"] div {margin-top:-0.25em} section[data-state="i1t1b"] div *:nth-of-type(2) {margin:auto; margin-top:-0.5em} section[data-state="i1t1t"] div *:nth-of-type(1) {margin:auto;} section[data-state="i1t1b"] div *:nth-of-type(1), section[data-state="i1t1t"] div *:nth-of-type(2) {text-align:center;} section[data-state="i2t0"] div {display:flex; flex-direction:row; justify-content:center; align-items:center; padding:0} section[data-state="i2t0"] div * {width:480px; padding:5px; margin:0; text-align:center;} section[data-state="citation"] div {display:flex; flex-direction:row; justify-content:center; align-items:center; padding:0; margin-top:-0.5em} section[data-state="citation"] div > *:nth-of-type(1) {width:20vw; padding:0; text-align:center; margin:0; margin-top:-0.7em} section[data-state="citation"] img {object-fit:cover; height:740px} section[data-state="citation"] div blockquote {width:80vw; margin:20px!important; font-size:1em} .alert {padding:1em 1.5em} .markmap-container {height:720px!important;width:960px!important; overflow:hidden!important;} svg.markmap > g {transform:translate(100px,100px) scale(1,1)} pre{max-height:720px!important; max-width:960px!important; overflow:hidden} .ui-content section {width:400px!important; height:300px!important; padding:0!important} .ui-content .slides {overflow:initial!important} .ui-content section div {width:100%; margin-left:-16px;} .ui-content foreignObject div {width:initial!important; margin-left:0} .ui-content section h1 {font-size:2.4em} .ui-content .slides h2 {height:301px!important; margin-top:0!important} .ui-content blockquote {width:92%!important; margin:auto} .ui-content blockquote p {margin:0px; padding:10px 0} .ui-content img {max-height:290px; max-width:370px;} .ui-content img[alt~="position-background"] {width:405px!important;height:305px!important; margin-top:-0.3em!important} .ui-content p + aside {width:405px!important;height:305px!important;} .ui-content img[alt~="position-left"] {height:300px!important} .ui-content aside.position-right {height:300px!important; width:45%!important} .ui-content section[data-state="i1t0b"] img, .ui-content section[data-state="i1t1f"] img {width:405px!important;height:305px!important; margin-top:-0.3em!important} .ui-content section[data-state="i1t1f"] *:nth-of-type(2) {margin-top:0.5em} .ui-content section[data-state="i1t0"] img {max-height:300px!important; max-width:400px!important; margin:0; margin-top:1em!important;} .ui-content .notes {display:none} .ui-content section[data-state="i1t1l"] div, .ui-content section[data-state="i1t1r"] div {margin-top:0.25em} .ui-content section[data-state="i2t0"] div * {width:190px!important; padding:2px; margin-right:7px; text-align:center;} .ui-content section[data-state="citation"] div p:nth-of-type(1) {width:80px!important; padding:0; text-align:center; margin:0; margin-top:0em!important;} .ui-content section[data-state="citation"] div blockquote p:nth-of-type(1) {width:unset!important;} .ui-content section[data-state="citation"] img {object-fit:cover; height:340px!important; width:80px; margin-top:1em;} .ui-content section[data-state="citation"] div blockquote {width:320px; margin:5px!important; font-size:1em} section[data-state="flashcard"] > div {display:flex; align-items:center; height:620px; flex-direction:column; justify-content:center;} .flashcard ol, .ui-content section[data-state="flashcard"] ol {display:block; margin-top:2em; margin-left:-50px} .flashcard ol,.flashcard ul, .ui-content section[data-state="flashcard"] ol, .ui-content section[data-state="flashcard"] ul {list-style-type:none} .flashcard ul li, .ui-content section[data-state="flashcard"] ul li {left:0;background-color:#fff;} .flashcard ol li, .ui-content section[data-state="flashcard"] ol li {background-color:transparent;border-radius:20px;width:760px;height:300px;border:none;margin:auto;margin-bottom:3em;perspective:1000px;display:flex;align-items:center;justify-content:center;} .flashcard ul, .ui-content section[data-state="flashcard"] ul {position:relative;width:100%;height:100%;transition:transform .8s;transform-style:preserve-3d} .flashcard ol li:hover>ul, .ui-content section[data-state="flashcard"] ol li:hover>ul{transform:rotateY(180deg)} .flashcard ol li>ul li:first-of-type,.flashcard ol li>ul li:nth-of-type(2), .ui-content section[data-state="flashcard"] ol li>ul li:first-of-type, .ui-content section[data-state="flashcard"] ol li>ul li:nth-of-type(2){position:absolute;width:100%;height:100%;-webkit-backface-visibility:hidden;backface-visibility:hidden} .flashcard ol li>ul li:first-of-type, .ui-content section[data-state="flashcard"] ol li>ul li:first-of-type{color:#000;font-weight:600;font-size:1.5em} .flashcard ol li>ul li:nth-of-type(2), .ui-content section[data-state="flashcard"] ol li>ul li:nth-of-type(2){color:#000;transform:rotateY(180deg)} .flashcard ul li, .ui-content section[data-state="flashcard"] ul li{padding:3em;overflow:hidden;border:5px solid #005596} .ui-content section[data-state="flashcard"] ol li:hover ul {transform:rotateY(180deg)!important} .ui-content section[data-state="flashcard"] ol li {height:200px!important; width:320px!important;} .ui-content section[data-state="flashcard"] ol li ul li:first-of-type, .ui-content section[data-state="flashcard"] ol li ul li:nth-of-type(2){position:absolute;width:100%;height:100%;-webkit-backface-visibility:hidden!important;backface-visibility:hidden!important} .ui-content section[data-state="flashcard"] ol li ul li:nth-of-type(2){color:#000;transform:rotateY(180deg)} .ui-content section[data-state="flashcard"] p {text-align:center; margin-top:20px} .ui-content section[data-state="flashcard"] ol li ul li:first-of-type{color:#000;font-weight:600;font-size:1.1em} .ui-content #doc .markmap-container {height:300px!important;width:400px!important; overflow:hidden!important;} .ui-content #doc svg.markmap style + g {transform:translate(50px,50px) scale(0.5,0.5)!important} .ui-content #doc pre{max-height:300px!important; max-width:400px!important; overflow:hidden} </style>