├── LICENSE
├── README.md
├── docs
    ├── css
    │   └── sidebar.css
    └── index.html
├── input.md
├── md-to-bootstrap5.lua
├── media
    ├── accordion.gif
    ├── alertdanger.png
    ├── alertinfo.png
    ├── button.png
    ├── buttonsuccess.png
    ├── card.png
    ├── carousel.gif
    ├── carouselquiz.gif
    ├── icon.png
    ├── jumbotron.png
    ├── quiz.gif
    ├── tabs.gif
    └── youtube.png
├── template
    ├── README.md
    └── bs5.template.html
└── test
    ├── bs5.bat
    ├── css
        └── sidebar.css
    └── result-v2.html


/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright © 2021–2022 François PARLANT and contributors.
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # Pandoc Lua filter : Markdown To Bootstrap
  2 | 
  3 | This pandoc Lua filter converts markdown to Bootstrap components.
  4 | 
  5 | *Useful for rapidly creating visually attractive Moodle courses*
  6 | 
  7 | # USAGE
  8 | 
  9 | 
 10 | ```
 11 | pandoc sample.md --lua-filter bootstrap.lua -o expected.html -f markdown+inline_code_attributes
 12 | ```
 13 | 
 14 | Or with a template to add the bootstrap headers and navbar with Table of content.
 15 | ```
 16 | pandoc sample.md --lua-filter bootstrap.lua -o result.html --template bs5.template.html -f markdown+inline_code_attributes
 17 | ```
 18 | 
 19 | # COMPONENTS
 20 | 
 21 | 
 22 | ## Header block (jumbotron)
 23 | 
 24 | <table > 
 25 | <tr><th >Simply type this:</th>  <th>Get that: </th><tr>
 26 | 
 27 | <tr><td>
 28 | 
 29 |  ```
 30 | ::: jumbotron
 31 | # Markdown to Bootstrap
 32 | Discovert how some simple Mardown can 
 33 |  be converted
 34 | 
 35 | Here is an implementation with pandoc 
 36 |  and Lua filter
 37 | :::
 38 | ``` 
 39 | </td>
 40 | <td> 
 41 | 
 42 | ![jumbotron](/media/jumbotron.png) 
 43 | 
 44 | </td></tr>
 45 | </table>
 46 | 
 47 | 
 48 | 
 49 | ## Simple Quiz
 50 | 
 51 | <table > 
 52 | <tr><th>Simply type the question and proposals:</th>  <th>And get that :</th><tr>
 53 | 
 54 | <tr><td>
 55 | 
 56 |  ```
 57 | ::: quiz
 58 | # This is the question?
 59 | 
 60 | * First proposition
 61 |   * Explanation about first
 62 | * Second proposition
 63 | * Third proposition
 64 | * Fourth proposition
 65 |   * Explanation about fourth
 66 | 
 67 | :::
 68 | ``` 
 69 | </td>
 70 | <td> 
 71 | 
 72 | ![jumbotron](/media/quiz.gif) 
 73 | 
 74 | </td></tr>
 75 | </table>
 76 | 
 77 | 
 78 | 
 79 | ## Carousel
 80 | 
 81 | <table > 
 82 | <tr><th >Type simply the slide content:</th>  <th>And get that: </th><tr>
 83 | 
 84 | <tr><td>
 85 | 
 86 | ```
 87 | ::: carousel carouselId
 88 | 
 89 | # first slide
 90 | Some content for first slide
 91 | 
 92 | # Second slide
 93 | Some content for second slide
 94 | 
 95 | # Third slide
 96 | Some content for third slide
 97 | 
 98 | :::
 99 | 
100 | ```
101 | 
102 | </td>
103 | <td> 
104 | 
105 | ![jumbotron](/media/carousel.gif) 
106 | 
107 | </td></tr>
108 | </table>
109 | 
110 | 
111 | 
112 | 
113 | 
114 | ## Accordion
115 | 
116 | <table > 
117 | <tr><th>Simply type the content of the toggle:</th>  <th>And get that: </th><tr>
118 | 
119 | <tr><td>
120 | 
121 | ```
122 | ::: accordion accordionId
123 | 
124 | # first toggle link
125 | Content of the first toggle
126 | 
127 | # Second toggle link
128 | Content of the second toggle
129 | 
130 | # Third toggle link
131 | Content of the third toggle
132 | 
133 | :::
134 | 
135 | ```
136 | 
137 | 
138 | </td>
139 | <td> 
140 | 
141 | ![jumbotron](/media/accordion.gif) 
142 | 
143 | </td></tr>
144 | </table>
145 | 
146 | 
147 | 
148 | 
149 | ## Tabs
150 | 
151 | 
152 | <table> 
153 | <tr><th>Type simply this:</th>  <th>Get that </th><tr>
154 | 
155 | <tr><td>
156 | 
157 | ```
158 | ::: tabs
159 | 
160 | # Choice 1
161 | Some content for first choice
162 | 
163 | # Choice 2
164 | Some content for second choice
165 | 
166 | # Choice 3
167 | Some content for third choice
168 | 
169 | :::
170 | 
171 | ```
172 | </td>
173 | <td> 
174 | 
175 | ![jumbotron](/media/tabs.gif) 
176 | 
177 | </td></tr>
178 | </table>
179 | 
180 | 
181 | 
182 | 
183 | 
184 | 
185 | ## Alerts
186 | 
187 | <table> 
188 | <tr><th>Type simply this:</th>  <th>Get that </th><tr>
189 | 
190 | <tr><td>
191 | 
192 | ```
193 | ::: info
194 | This is an info alert
195 | :::
196 | ```
197 | 
198 | </td>
199 | <td> 
200 | 
201 | ![jumbotron](/media/alertinfo.png) 
202 | 
203 | </td></tr>
204 | <tr><td>
205 | 
206 | ```
207 | ::: danger
208 | This is an danger alert
209 | :::
210 | ```
211 | 
212 | </td>
213 | <td> 
214 | 
215 | ![jumbotron](/media/alertdanger.png) 
216 | 
217 | </td></tr>
218 | 
219 | </table>
220 | 
221 | 
222 | 
223 | 
224 | ## Cards
225 | 
226 | <table> 
227 | <tr><th>Type simply the card content:</th>  <th>Get that </th><tr>
228 | 
229 | <tr><td>
230 | 
231 | ```
232 | ::: card
233 | 
234 | ::: header (optional)
235 | text of the header
236 | :::
237 | 
238 | # a title in the body
239 | 
240 | Paragraph one of the body
241 | Paragraph two of the body
242 | 
243 | :::footer (optional)
244 | text of the footer
245 | :::
246 | 
247 | :::
248 | 
249 | ```
250 | 
251 | </td>
252 | <td> 
253 | 
254 | ![jumbotron](/media/card.png) 
255 | 
256 | </td></tr>
257 | </table>
258 | 
259 | 
260 | 
261 | 
262 | 
263 | 
264 | 
265 | ## Buttons
266 | <table> 
267 | <tr><th>Type simply this:</th>  <th>Get that </th><tr>
268 | 
269 | <tr><td>
270 | 
271 | ```
272 | 
273 | You can [Click me](https://github.com/pandoc)
274 | 
275 | ```
276 | 
277 | </td>
278 | <td> 
279 | 
280 | ![jumbotron](/media/button.png) 
281 | 
282 | </td></tr>
283 | <tr><td>
284 | 
285 | ```
286 | 
287 | You can [Click me](https://github.com/pandoc){.success}
288 | 
289 | ```
290 | 
291 | </td>
292 | <td> 
293 | 
294 | ![jumbotron](/media/buttonsuccess.png) 
295 | 
296 | </td></tr>
297 | 
298 | </table>
299 | 
300 | 
301 | 
302 | ## Media link
303 | 
304 | <table> 
305 | <tr><th>Type simply this:</th>  <th>Get that </th><tr>
306 | 
307 | <tr><td>
308 | 
309 | ```
310 | 
311 | [Bootstrap design](https://www.youtube.com/watch?v=Uz7XbIxHf-4)
312 | 
313 | ```
314 | 
315 | </td>
316 | <td> 
317 | 
318 | ![youtube embed](/media/youtube.png) 
319 | 
320 | </td></tr>
321 | </table>
322 | 
323 | 
324 | 
325 | ## Icons
326 | 
327 | <table> 
328 | <tr><th>Simply type this:</th>  <th>And get that: </th><tr>
329 | 
330 | <tr><td>
331 | 
332 | ```
333 | [](.bi-bootstrap)
334 | ```
335 | 
336 | </td>
337 | <td> 
338 | 
339 | ![jumbotron](/media/icon.png) 
340 | 
341 | </td></tr>
342 | </table>
343 | 
344 | # Other tools included
345 | This filter comes with a template to include:
346 | 
347 | * [x] Table of content for the sidebar
348 | 
349 | Another filter can be used to insert social network blocks:
350 | 
351 | * [x] [Social-snetwork](https://github.com/fxpar/social-networks-pandoc-lua-filter) filter to create recommandation blocks
352 | 
353 | 
354 | 
355 | # ROADMAP
356 | 
357 | Here is what is already done and which components are planned:
358 | 
359 | * [x] Jumbotrons
360 | * [x] Accordions
361 | * [x] Alerts
362 | * [x] Tabs
363 | * [x] Carousel
364 | * [x] Buttons
365 | * [ ] Carddeck
366 | * [ ] ButtonGroups
367 | * [ ] Dropdowns
368 | * [x] YouTube Embeds
369 | 
370 | 
371 | 
372 | ## Swyping Quiz
373 | 
374 | <table> 
375 | <tr><th>Type simply this:</th>  <th>And get that: </th><tr>
376 | 
377 | <tr><td>
378 | 
379 | ```
380 | ::: carousel
381 | 
382 | ::: quiz
383 | 
384 | # Check your level
385 | 
386 | A little quiz for you!
387 | 
388 | # Question 1
389 | 
390 | * proposition 1
391 |   * feedback for proposition 1
392 | * proposition 2
393 | * proposition c
394 | * proposition d
395 | 
396 |   
397 | # Question 2
398 | 
399 | * Prop A
400 | * Prop B
401 | * Prop C
402 |   * feedback prop C
403 | * prop D
404 | :::
405 | 
406 | :::
407 | ```
408 | 
409 | </td>
410 | <td> 
411 | 
412 | ![jumbotron](/media/carouselquiz.gif) 
413 | 
414 | </td></tr>
415 | </table>
416 | 
417 | # Creator
418 | 
419 | François Parlant
420 | * [Github fxpar](https://github.com/fxpar/)
421 | * [Linkedin François Parlant](https://linkedin.com/in/francois-parlant/)
422 | 
423 | Thanks to [Tarleb](https://stackoverflow.com/users/2425163/tarleb) for his helpful answers about Lua on stackoveflow 👍
424 | 
425 | 


--------------------------------------------------------------------------------
/docs/css/sidebar.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |   min-height: 100vh;
 3 |   min-height: -webkit-fill-available;
 4 | }
 5 | 
 6 | html {
 7 |   height: -webkit-fill-available;
 8 | }
 9 | 
10 | main {
11 |   display: flex;
12 |   flex-wrap: nowrap;
13 |   height: 100vh;
14 |   height: -webkit-fill-available;
15 |   max-height: 100vh;
16 |   overflow-x: auto;
17 |   overflow-y: hidden;
18 | }
19 | 
20 | .b-example-divider {
21 |   flex-shrink: 0;
22 |   width: 1.5rem;
23 |   height: 100vh;
24 |   background-color: rgba(0, 0, 0, .1);
25 |   border: solid rgba(0, 0, 0, .15);
26 |   border-width: 1px 0;
27 |   box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
28 | }
29 | 
30 | .bi {
31 |   vertical-align: -.125em;
32 |   pointer-events: none;
33 |   fill: currentColor;
34 | }
35 | 
36 | .dropdown-toggle { outline: 0; }
37 | 
38 | .nav-flush .nav-link {
39 |   border-radius: 0;
40 | }
41 | 
42 | .btn-toggle {
43 |   display: inline-flex;
44 |   align-items: center;
45 |   padding: .25rem .5rem;
46 |   font-weight: 600;
47 |   color: rgba(0, 0, 0, .65);
48 |   background-color: transparent;
49 |   border: 0;
50 | }
51 | .btn-toggle:hover,
52 | .btn-toggle:focus {
53 |   color: rgba(0, 0, 0, .85);
54 |   background-color: #d2f4ea;
55 | }
56 | 
57 | .btn-toggle::before {
58 |   width: 1.25em;
59 |   line-height: 0;
60 |   content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%280,0,0,.5%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
61 |   transition: transform .35s ease;
62 |   transform-origin: .5em 50%;
63 | }
64 | 
65 | .btn-toggle[aria-expanded="true"] {
66 |   color: rgba(0, 0, 0, .85);
67 | }
68 | .btn-toggle[aria-expanded="true"]::before {
69 |   transform: rotate(90deg);
70 | }
71 | 
72 | .btn-toggle-nav a {
73 |   display: inline-flex;
74 |   padding: .1875rem .5rem;
75 |   margin-top: .125rem;
76 |   margin-left: 1.25rem;
77 |   text-decoration: none;
78 | }
79 | .btn-toggle-nav a:hover,
80 | .btn-toggle-nav a:focus {
81 |   background-color: #d2f4ea;
82 | }
83 | 
84 | .scrollarea {
85 |   overflow-y: auto;
86 | }
87 | 
88 | .fw-semibold { font-weight: 600; }
89 | .lh-tight { line-height: 1.25; }
90 | 


--------------------------------------------------------------------------------
/docs/index.html:
--------------------------------------------------------------------------------
  1 | <html lang="fr">
  2 | <head>
  3 | <meta charset="utf-8">
  4 | <title>Markdown to Bootstrap</title>
  5 | <meta name="viewport" content="width=device-width, initial-scale=1">
  6 |  <meta name="description" content="François Parlant livre ses 4 ressources les plus utiles pour apprendre PowerBi et pour former ses collègues.">
  7 |   <meta name="keywords" content="PowerBi,Données,Apprendre,Se former, Tutoriel">
  8 |   <meta name="author" content="François Parlant">
  9 | <meta property="og:image" content=""/>
 10 | <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
 11 | <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.3/font/bootstrap-icons.css">
 12 | <link href="css/sidebar.css" rel="stylesheet">
 13 | <link href="../css/sidebar.css" rel="stylesheet">
 14 | 	<style>
 15 | 		@media (min-width:1025px) { body { width: 50% !important; margin-left:25vw !important;} }
 16 | 	</style>
 17 | 	
 18 | <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
 19 | 
 20 | </head>
 21 | <body >
 22 | 
 23 | <!-- container -->
 24 | <div class="container container-fluid" >
 25 | 
 26 | 
 27 | 
 28 | <nav class="navbar sticky-top navbar-light bg-light">
 29 |   <div class="container-fluid">
 30 |     <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample" aria-expanded="false" aria-label="Toggle navigation">
 31 |       <span class="navbar-toggler-icon"></span>
 32 |     </button>
 33 | 	
 34 | 	<div class="btn-group" role="group">
 35 |     <button id="btnGroupDrop1" type="button" class="btn btn-Light dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
 36 |       Share
 37 |     </button>
 38 |     <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="btnGroupDrop1">
 39 | 
 40 | 
 41 | <li><a class='dropdown-item' href='https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Ffxpar.github.io%2FPandoc-Lua-Markdown-Bootstrap%2Findex.html'>
 42 | <i class='bi bi-facebook p-3'></i>Facebook</a>
 43 | </li>
 44 | <li><a class='dropdown-item' href='http://twitter.com/intent/tweet?text=Check%20this%20code%20to%20convert%20Markdown%20into%20beautiful%20bootstrap%20components%20%28carousel%2C%20accordion%2C%20cards%2C%20tabs%E2%80%A6%29&url=https%3A%2F%2Ffxpar.github.io%2FPandoc-Lua-Markdown-Bootstrap%2Findex.html'>
 45 | <i class='bi bi-twitter p-3'></i>Twitter</a>
 46 | </li>
 47 | <li><a class='dropdown-item' href='http://www.linkedin.com/shareArticle?mini=true&url=https%3A%2F%2Ffxpar.github.io%2FPandoc-Lua-Markdown-Bootstrap%2Findex.html&title=Check%20this%20code%20to%20convert%20Markdown%20into%20beautiful%20bootstrap%20components%20%28carousel%2C%20accordion%2C%20cards%2C%20tabs%E2%80%A6%29'>
 48 | <i class='bi bi-linkedin p-3'></i>Linkedin</a>
 49 | </li>
 50 | <li><a class='dropdown-item' href='https://wa.me/?text=Check%20this%20code%20to%20convert%20Markdown%20into%20beautiful%20bootstrap%20components%20%28carousel%2C%20accordion%2C%20cards%2C%20tabs%E2%80%A6%29%3A%20https%3A%2F%2Ffxpar.github.io%2FPandoc-Lua-Markdown-Bootstrap%2Findex.html'>
 51 | <i class='bi bi-whatsapp p-3'></i>Whatsapp</a>
 52 | </li>
 53 | <li><a class='dropdown-item' href='https://telegram.me/share/url?url=https%3A%2F%2Ffxpar.github.io%2FPandoc-Lua-Markdown-Bootstrap%2Findex.html&text=Check%20this%20code%20to%20convert%20Markdown%20into%20beautiful%20bootstrap%20components%20%28carousel%2C%20accordion%2C%20cards%2C%20tabs%E2%80%A6%29'>
 54 | <i class='bi bi-telegram p-3'></i>Telegram</a>
 55 | </li>
 56 | 
 57 | 
 58 | 
 59 | 
 60 |     </ul>
 61 |   </div>
 62 |   
 63 |   </div>
 64 | </nav>
 65 | 
 66 | <!-- <a class="btn btn-primary" data-bs-toggle="offcanvas" href="#offcanvasExample" role="button" aria-controls="offcanvasExample">
 67 |   Link with href
 68 | </a>
 69 | <button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">
 70 |   Button with data-bs-target
 71 | </button> -->
 72 | 
 73 | <div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
 74 |   <div class="offcanvas-header">
 75 |     <h5 class="offcanvas-title" id="offcanvasExampleLabel">Markdown to Bootstrap</h5>
 76 |     <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
 77 |   </div>
 78 |   <div class="offcanvas-body " >
 79 | 
 80 | 	<ul class="list-unstyled ps-0">
 81 | 	<li class="border-top my-3"></li>
 82 | 		<li class="mb-1">
 83 | 			<button class="btn btn-toggle align-items-center rounded" data-bs-toggle="collapse" data-bs-target="#formules-collapse" aria-expanded="true">Content</button>
 84 | 			<div id="formules-collapse" class="collapse show" >
 85 | 				<ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small" data-bs-dismiss="offcanvas">
 86 | 					<li class="mb-1"><a class="link-dark  rounded" href="#sectionIntro">Intro</a></li>
 87 | 					<li><a class="link-dark rounded" href="#sectionJumbotron">Jumbotron</a></li>
 88 | 					<li><a class="link-dark rounded" href="#sectionAlerts">Alerts</a></li>
 89 | 					<li><a class="link-dark rounded" href="#sectionCards">Cards</a></li>
 90 | 					<li><a class="link-dark rounded" href="#sectionCarousel">Carousel</a></li>
 91 | 					<li><a class="link-dark rounded" href="#sectionAccordion">Accordion</a></li>
 92 | 					<li><a class="link-dark rounded" href="#sectionTabs">Tabs</a></li>
 93 | 					<li><a class="link-dark rounded" href="#sectionQuiz">Quiz</a></li>
 94 | 				</ul>
 95 | 			</div>
 96 | 		</li>
 97 | 		<li class="border-top my-3"></li>
 98 | 		<li class="mb-1">
 99 | 			<button class="btn btn-toggle align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#presentation-collapse" aria-expanded="true">More info</button>
100 | 			<div id="presentation-collapse" class="collapse show" >
101 | 				<ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small" data-bs-dismiss="offcanvas">
102 | 					<li><a class="nav-link link-dark rounded" href="https://fxpar.github.io/Cours/"><i class="bi-mortarboard-fill me-2"></i> Autres cours</a></li>
103 | 					<li><a class="nav-link link-dark rounded" href="https://github.com/fxpar/lua-filters/tree/master/md-to-bootstrap"><i class="bi-github me-2"></i>Projet sur Github</a></li>
104 | 					<li><a class="nav-link link-dark rounded" href="https://www.youtube.com/c/enparlantdebureautiqueformezvous"><i class="bi-youtube me-2"></i>Chaîne YouTube</a></li>
105 | 					
106 | 
107 | 				</ul>
108 | 			</div>
109 | 		</li>
110 | 		<li class="border-top my-3"></li>
111 | 		<li><a class="nav-link link-dark rounded" href="https://www.linkedin.com/in/francois-parlant/"><i class="bi-linkedin me-2"></i>François Parlant</a></li>
112 | 	</ul>
113 |    
114 |   </div>
115 | </div>
116 | <!-- fin navbar -->
117 | 
118 | 
119 | 
120 | 
121 | <!-- INTRO -->
122 | <div class="text-white p-2 p-md-5 rounded-lg mt-3" style="background:purple" id="sectionIntro">
123 |   <h1 class="display-4">Markdown to Bootstrap</h1>
124 |   <p class="lead">Discover how some simple markdown can be converted</p>
125 |   <hr class="my-4">
126 |   <p>Here is an implementation with pandoc and Lua filter</p>
127 |   <a class="btn btn-light btn-lg" href="https://github.com/fxpar/lua-filters/tree/master/md-to-bootstrap" role="button"><i class="fa fa-download"></i>Check the projet on Github</a>
128 | </div>
129 | 
130 | <p><br/></p>
131 | <p><br/></p>
132 | 
133 | <h2>Simple Quiz</h2>
134 | <p>Click on the propositions</p>
135 | <div class="card  mt-2" style="width:20rem">
136 | 	<div class="card-header d-flex justify-content-between align-items-center">
137 | 		<div class="lead">This is the question?</div>
138 | 
139 | 	</div>
140 | 
141 | 	<ul class="list-group list-group-flush">
142 | 		<li class="list-group-item collapsed" data-bs-toggle="collapse" data-bs-target="#q1a1" aria-expanded="false">First proposition
143 | 			<div id="q1a1" class="collapsed collapse" style="">
144 | 				<div class="alert alert-success p-3">Explanation about first 
145 | 					
146 | 				</div>
147 | 			</div>
148 | 		</li>
149 | 
150 | 		<li class="list-group-item ">Second proposition</li>
151 | 		<li class="list-group-item ">Third proposition</li>
152 | 		<li class="list-group-item collapsed" data-bs-toggle="collapse" data-bs-target="#q1a4" aria-expanded="false">Fourth proposition
153 | 			<div id="q1a4" class="collapsed collapse" style="">
154 | 					<div class="alert alert-success p-3">Explanation about fourth 
155 | 						
156 | 					</div>
157 | 				</div>
158 | 		</li>
159 | 	</ul>
160 | 	<div class="card-footer">
161 | 		
162 | 	</div>
163 | 
164 | </div>
165 | 
166 | 
167 | 
168 | <hr class="my-4" id="sectionJumbotron">
169 | <h2 class="display-4" id="sectionJumbotron">Jumbotron</h2>
170 | <!-- JUMBOTRON COMPONENT -->
171 | 
172 | <div class="bg-warning p-2 p-md-5 rounded-lg mt-3" >
173 |   <h1 class="display-4">This is a big header</h1>
174 |   <p class="lead">This is what a jumbotron (bootrap4) or a header (bs5) looks like.</p>
175 |   <hr class="my-4">
176 |   <p>It should be created automatically from the markdown code below.</p>
177 |   
178 | </div>
179 | <div>It should be simply created from this code:</div>
180 | <pre class="bg-light"><code>
181 | ::: jumbotron
182 | # This is a big header
183 | This is what a jumbotron (bootrap4) or a header (bs5) looks like.
184 | 
185 | It should be created automatically from the markdown code below.
186 | :::
187 | 
188 | </code></pre>
189 | 
190 | <hr class="my-4" id="sectionAlerts">
191 | <!-- ALERT Component -->
192 | <h2 class="display-4" >ALERTS</h2>
193 | <div class="alert alert-danger" role="alert" id="alertDanger">
194 |   This is a danger alert
195 | </div>
196 | 
197 | <div>It should be created from this code:</div>
198 | 
199 | <pre class="bg-light"><code>
200 | 
201 | ::: danger
202 | This is a danger alert
203 | :::
204 | 
205 | </code></pre>
206 | 
207 | <hr class="my-4">
208 | <!-- ALERT Component -->
209 | 
210 | <div class="alert alert-info" role="alert" id="alertInfo">
211 |   This is an info alert
212 | </div>
213 | 
214 | <div>It should be created from this code:</div>
215 | 
216 | <pre class="bg-light"><code>
217 | 
218 | ::: info
219 | This is an info alert
220 | :::
221 | 
222 | </code></pre>
223 | 
224 | 
225 | <hr class="my-4" id="sectionCards">
226 | <!-- CARDS Component -->
227 | <h2 class="display-4" >CARDS</h2>
228 | <div class="card text-center" style="width:20rem" id="card">
229 |   <div class="card-header">
230 |     text of the header
231 |   </div>
232 |   <div class="card-body">
233 |     <h5 class="card-title">a title in the body</h5>
234 |     <p class="card-text">Paragraph one of the body</p>
235 |     <p class="card-text">Paragraph two of the body</p>
236 |   </div>
237 |   <div class="card-footer text-muted">
238 |     text of the footer
239 |   </div>
240 | </div>
241 | <p></p>
242 | <div>It should be simply created from this code:</div>
243 | 
244 | <pre class="bg-light"><code>
245 | 
246 | ::: card
247 | 
248 | ::: header (optional)
249 | text of the header
250 | :::
251 | 
252 | # a title in the body
253 | 
254 | Paragraph one of the body
255 | Paragraph two of the body
256 | 
257 | ::: footer (optional)
258 | text of the footer
259 | :::
260 | 
261 | :::
262 | 
263 | </code></pre>
264 | 
265 | 
266 | 
267 | <hr class="my-4" id="sectionCarousel">
268 | <!-- CAROUSEL Component -->
269 | <h2 class="display-4" >CAROUSEL</h2>
270 | 
271 | <div id="carouselExampleDark" class="carousel carousel-dark slide" data-bs-ride="carousel">
272 |   <div class="carousel-indicators">
273 |     <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
274 |     <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="1" aria-label="Slide 2"></button>
275 |     <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="2" aria-label="Slide 3"></button>
276 |   </div>
277 |   <div class="carousel-inner">
278 |     <div class="carousel-item active" data-bs-interval="3000">
279 |      <svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Third slide" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#e5e5e5"></rect><text x="35%" y="35%" fill="#999" dy=".3em">optional first image</text></svg>
280 | 	  
281 |       <div class="carousel-caption d-none d-md-block">
282 |         <h5 class="display-4">First slide title</h5>
283 |         <p>Some content for the first slide.</p>
284 |       </div>
285 |     </div>
286 |     <div class="carousel-item" data-bs-interval="2000">
287 |       <svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Third slide" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#e5e5e5"></rect><text x="35%" y="35%" fill="#999" dy=".3em">optional second image</text></svg>
288 |       <div class="carousel-caption d-none d-md-block">
289 |         <h5 class="display-4">Second slide title</h5>
290 |         <p>Some content for the second slide.</p>
291 |       </div>
292 |     </div>
293 |     <div class="carousel-item">
294 |       <svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Third slide" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#e5e5e5"></rect><text x="35%" y="35%" fill="#999" dy=".3em">optional third image</text></svg>
295 |       <div class="carousel-caption d-none d-md-block">
296 |         <h5 class="display-4">Third slide title</h5>
297 |         <p>Some content for the third slide.</p>
298 |       </div>
299 |     </div>
300 |   </div>
301 | 
302 |   <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="prev">
303 |     <span class="carousel-control-prev-icon" aria-hidden="true"></span>
304 |     <span class="visually-hidden">Previous</span>
305 |   </button>
306 |   <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="next">
307 |     <span class="carousel-control-next-icon" aria-hidden="true"></span>
308 |     <span class="visually-hidden">Next</span>
309 |   </button>
310 | </div>
311 | 
312 |   <p><br/></p>
313 | Should be created from
314 | <pre class="bg-light"><code>
315 | 
316 | ::: carousel 
317 | 
318 | # First slide title
319 | Some content for the first slide.
320 | 
321 | # Second slide title
322 | Some content for the second slide.
323 | 
324 | # Third slide title
325 | Some content for the third slide.
326 | 
327 | :::
328 | 
329 | </code></pre>
330 | 
331 | 
332 | 
333 | 
334 | 
335 | <hr class="my-4" id="sectionAccordion">
336 | <!-- ACCORDIoN Component -->
337 | <h2 class="display-4" >ACCORDION</h2>
338 | <div>Click on each drawer title to unfold the level of the accordion.</div>
339 | <p><br></p>
340 | <div class="accordion" id="accordionExample" style="width:20rem">
341 |   <div class="accordion-item">
342 |     <h2 class="accordion-header" id="headingOne">
343 |       <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
344 |         <b>Accordion Item #1</b>
345 |       </button>
346 |     </h2>
347 |     <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
348 |       <div class="accordion-body">
349 |         Content of the first accordion
350 |       </div>
351 |     </div>
352 |   </div>
353 |   <div class="accordion-item">
354 |     <h2 class="accordion-header" id="headingTwo">
355 |       <button class="accordion-button collapsed " type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
356 |         <b>Accordion Item #2</b>
357 |       </button>
358 |     </h2>
359 |     <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
360 |       <div class="accordion-body">
361 |         Content of the second accordion
362 |       </div>
363 |     </div>
364 |   </div>
365 |   <div class="accordion-item">
366 |     <h2 class="accordion-header" id="headingThree">
367 |       <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
368 |         <b>Accordion Item #3</b>
369 |       </button>
370 |     </h2>
371 |     <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
372 |       <div class="accordion-body">
373 |        Content of the third accordion
374 |       </div>
375 |     </div>
376 |   </div>
377 | </div>
378 | 
379 | 
380 | <p><br></p>
381 | <div>Should be created from:</div>
382 | 
383 | <pre class="bg-light"><code>
384 | 
385 | ::: accordion
386 | 
387 | # Accordion Item #1
388 | First accordion content
389 | 
390 | # Accordion Item #2
391 | Second accordion content
392 | 
393 | # Accordion Item #3
394 | Third accordion content
395 | 
396 | :::
397 | 
398 | </code></pre>
399 | 
400 | 
401 | 
402 | 
403 | <hr class="my-4" id="sectionTabs">
404 | <!-- TABS Component -->
405 | <h2 class="display-4" >TABS</h2>
406 | <div>Click on each "tab" to see the content of the card change</div>
407 | <!-- début tabs -->
408 | 
409 | 
410 |                 <p><br></p>
411 |                 <div class="card-header" style="width:20rem">
412 |                     <ul class="nav nav-pills card-header-pills" style="list-style-type: none;">
413 |                         <li class="nav-item">
414 |                             <a class="nav-link  active show" data-bs-toggle="tab" href="#menu1">Choice 1</a>
415 |                         </li>
416 |                         <li class="nav-item">
417 |                             <a class="nav-link" data-bs-toggle="tab" href="#menu2">Choice 2</a>
418 |                         </li>
419 |                         <li class="nav-item">
420 |                             <a class="nav-link" data-bs-toggle="tab" href="#menu3">Choice 3</a>
421 |                         </li>
422 | 
423 |                     </ul>
424 |                 </div>
425 | 
426 |                 <div class="tab-content border-left border-right border-bottom " style="width:20rem">
427 | 
428 |                     <div id="menu1" class="tab-pane fade in active show border p-3">
429 |                         
430 |                         <p class="lead">Some content for first choice</p>
431 |                     </div>
432 |                     <div id="menu2" class="tab-pane fade border p-3">
433 |                         
434 |                         <p class="lead">Some content for second choice</p>
435 |                     </div>
436 |                     <div id="menu3" class="tab-pane fade border p-3">
437 |                         
438 |                         <p class="lead">Some content for third choice</p>
439 |                     </div>
440 | 
441 |                 </div>
442 | 
443 | 
444 |                 <!-- fin des tabs -->
445 | <p><br/></p>
446 | <div>Should be created from</div>
447 | 
448 | <pre class="bg-light"><code>
449 | 
450 | ::: tabs
451 | 
452 | # Linux
453 | ## Support for Linux users
454 | Create a shell script
455 | 
456 | # Mac
457 | ## Support for Mac users
458 | Do it with Cmd.
459 | 
460 | # Windows
461 | ## Support for windows users
462 | Do it with Ctrl
463 | 
464 | :::
465 | 
466 | </code></pre>
467 | 
468 | 
469 | 
470 | 
471 | <p><br></p>
472 | <p><br></p>
473 | <p><br></p>
474 | 
475 | <hr class="my-4" id="sectionSwypingQuiz">
476 | <h2 class="display-4" >Swyping quiz</h2>
477 | <!-- Quiz COMPONENT -->
478 | 
479 | <br/>
480 | <div id="carouselTest1" class="carousel slide" data-bs-interval="false" data-bs-ride="false" style="width:20rem">
481 |     <div class="carousel-inner">
482 | 
483 | 
484 |         <div class="carousel-item active">
485 | 
486 | 
487 | 
488 |             <div class="card text-center">
489 | 
490 |                 <div class="card-body">
491 |                     <h5 class="card-title display-4">Level check</h5>
492 |                     <p class="card-text">A little quiz for you!</p>
493 |                     <a class="btn btn-success text-white" data-bs-target="#carouselTest1" data-bs-slide="next" role="button">Start!</a>
494 |                 </div>
495 | 
496 |             </div>
497 | 
498 |         </div>
499 | 
500 | 
501 |         <div class="carousel-item">
502 | 
503 | 
504 |             <div class="card  mt-2" style="">
505 |                 <div class="card-header d-flex justify-content-between align-items-center">
506 |                     <div class="lead">Question 1 ?</div>
507 | 
508 |                 </div>
509 | 
510 |                 <ul class="list-group list-group-flush">
511 |                     <li class="list-group-item collapsed" data-bs-toggle="collapse" data-bs-target="#q2q1a1" aria-expanded="false">Proposition 1
512 |                         <div id="q2q1a1" class="collapsed collapse" style="">
513 |                             <div class="alert alert-success p-3">Feedback for proposition 1
514 |                             </div>
515 |                         </div>
516 |                     </li>
517 | 
518 |                     <li class="list-group-item ">Proposition 2</li>
519 |                     <li class="list-group-item ">Proposition 3</li>
520 |                     <li class="list-group-item ">Proposition 4</li>
521 |                 </ul>
522 |                 <div class="card-footer">
523 |                     <button class="btn btn-xs btn-primary text-right pull-right" data-bs-target="#carouselTest1" data-bs-slide="next" role="button">Next</button>
524 | 
525 |                 </div>
526 | 
527 |             </div>
528 | 
529 |         </div>
530 | 
531 | 
532 | 
533 |         <div class="carousel-item">
534 | 
535 | 
536 |             <div class="card  mt-2" style="">
537 |                 <div class="card-header d-flex justify-content-between align-items-center">
538 |                     <div class="lead">Question 2?</div>
539 | 
540 |                 </div>
541 | 
542 |                 <ul class="list-group list-group-flush">
543 |                     <li class="list-group-item">Prop A<br>
544 |                     </li>
545 | 
546 |                     <li class="list-group-item">Prop B<br></li>
547 |                     <li class="list-group-item collapsed" data-bs-toggle="collapse" data-bs-target="#q1a2" aria-expanded="false">Prop C<br>
548 |                         <div id="q1a2" class="collapsed collapse" style="">
549 |                             <div class="alert alert-success" >Feedback for prop C
550 |                             </div>
551 |                         </div>
552 |                     </li>
553 | 					<li class="list-group-item">Prop D<br></li>
554 |                 </ul>
555 |                 <div class="card-footer">
556 |                     <button class="btn btn-primary" data-bs-target="#carouselTest1" data-bs-slide="next" role="button">Suivant</button>
557 |                 </div>
558 |             </div>
559 |         </div>
560 |     </div>
561 | </div>
562 | 
563 | <p><br></p>
564 | <p><br></p>
565 | <p><br></p>
566 | <p><br></p>
567 | <p><br></p>
568 | <p><br></p>
569 | It should simply be created from this code
570 | 
571 | <pre class="bg-light"><code>
572 | ::: quiz carousel
573 | 
574 | # 2 most frequent questions
575 | Earn points for the exam
576 | 
577 | 
578 | # Which bootstrap component can be swyped?
579 | * Carousel
580 |   * Perfect! yes the carousel has controls to swype on mobile and click on desktop.
581 | * Accordion
582 | * Alert
583 | * Carddeck
584 | 
585 | # Which language takes indentation very seriously?
586 | * javascript
587 | * Php
588 | * Python
589 |   * yes in Python indenting code is very important
590 | 
591 | 
592 | :::
593 | </code></pre>
594 | 
595 | 
596 | 
597 | 
598 | 
599 | 
600 | 
601 | <hr class="my-4" id="sectionButtons">
602 | <!-- Buttons Component -->
603 | <h2 class="display-4" >Buttons</h2>
604 | Links are converted to buttons by default
605 | <p></p>
606 | 
607 | <p>You can <a class="btn btn-primary" href="https://github.com/pandoc">Click me</a></p>
608 | 
609 | <div>Is created from the code</div>
610 | <pre class="bg-light"><code>
611 | [Pandoc repository](https://github.com/pandoc)
612 | 
613 | </code></pre>
614 | 
615 | 
616 | <a class="btn btn-success" href="https://github.com/pandoc">Pandoc repository</a>
617 | 
618 | <div>Is created from the code</div>
619 | <pre class="bg-light"><code>
620 | [Pandoc repository](https://github.com/pandoc){.success}
621 | 
622 | </code></pre>
623 | 
624 | 
625 | 
626 | <hr class="my-4" id="sectionEmbeds">
627 | <!-- Embeds Component -->
628 | <h2 class="display-4" >Embeds</h2>
629 | YouTube video are turned into embed
630 | 
631 | <p>
632 | [Moodle Bootstrap Design](https://www.youtube.com/watch?v=Uz7XbIxHf-4)
633 | </p>
634 | 
635 | <div class="ratio ratio-16x9">
636 | 				<iframe  src="https://www.youtube.com/embed/Uz7XbIxHf-4?rel=0" allowfullscreen></iframe>
637 | 			</div>
638 | 
639 | 
640 | <hr class="my-4" id="sectionIcons">
641 | <!-- Embeds Component -->
642 | <h2 class="display-4" >Icons</h2>
643 | 
644 | <i class="bi bi-bootstrap"></i>
645 | 
646 | <div>Should be created from:</div>
647 | 
648 | <pre class="bg-light"><code>
649 | {.bi-bootstrap}
650 | </code></pre>
651 | <div>Or even:</div>
652 | <pre class="bg-light"><code>
653 | (.bi-bootstrap)
654 | </code></pre>
655 | 
656 | <div>But currently requires the full syntax to work:</div>
657 | 
658 | <pre class="bg-light"><code>
659 | 
660 | []{.bi .bi-bootstrap}
661 | 
662 | </code></pre>
663 | 
664 | 
665 | 
666 | 
667 | 
668 | </div> <!-- fin .container -->
669 | </body>
670 | </html>
671 | 


--------------------------------------------------------------------------------
/input.md:
--------------------------------------------------------------------------------
  1 | ---
  2 | title: Markdown to Bootstrap
  3 | author: François Parlant
  4 | description: Pandoc Lua filter to convert markdown code into Beautiful Bootstrap components (carousel, accordion, cards, jumbotrons...)
  5 | url: https://fxpar.github.io/Pandoc-Lua-Markdown-Bootstrap/
  6 | iconprefix: bi
  7 | ---
  8 | 
  9 | 
 10 | # JUMBOTRON
 11 | 
 12 | ::: jumbotron
 13 | 
 14 | # Learn Markdown
 15 | 
 16 | Lead text for this header block
 17 | 
 18 | Description part for this jumbotron
 19 | 
 20 | :::
 21 | 
 22 | 
 23 | # JUMBOTRON COLORED
 24 | 
 25 | ::: {.jumbotron .bg-success .text-white}
 26 | 
 27 | # Learn Boostrap
 28 | 
 29 | Lead text for this header block
 30 | 
 31 | Description part for this jumbotron
 32 | 
 33 | :::
 34 | 
 35 | 
 36 | 
 37 | # ALERTS
 38 | 
 39 | ::: danger
 40 | 
 41 | You must do this to be safe
 42 | 
 43 | :::
 44 | 
 45 | 
 46 | 
 47 | ::: info
 48 | 
 49 | This is an information
 50 | 
 51 | :::
 52 | 
 53 | 
 54 | ::: warning
 55 | 
 56 | []{.bi .bi-bug} This is an information
 57 | 
 58 | :::
 59 | 
 60 | 
 61 | 
 62 | # CARD
 63 | 
 64 | ::: card ::::::::
 65 | 
 66 | ::: header
 67 | 
 68 | text of the header
 69 | 
 70 | :::
 71 | 
 72 | # a title in the body
 73 | 
 74 | Paragraph one of the body
 75 | Paragraph two of the body
 76 | 
 77 | ::: footer
 78 | 
 79 | text of the footer
 80 | 
 81 | :::
 82 | 
 83 | ::::::::::::::::::
 84 | 
 85 | 
 86 | 
 87 | 
 88 | 
 89 | # ACCORDION
 90 | 
 91 | 
 92 | ::: accordion
 93 | 
 94 | # Accordion Item #1
 95 | First toggle content
 96 | 
 97 | # Accordion Item #2
 98 | Second toggle content
 99 | 
100 | # Accordion Item #3
101 | Third toggle content
102 | 
103 | :::
104 | 
105 | 
106 | 
107 | 
108 | 
109 | # CAROUSEL
110 | 
111 | ::: carousel
112 | 
113 | # First slide label
114 | Some representative placeholder content for the first slide.
115 | 
116 | # Second slide label
117 | Some representative placeholder content for the second slide.
118 | 
119 | # Third slide label
120 | Some representative placeholder content for the third slide.
121 | 
122 | :::
123 | 
124 | 
125 | 
126 | 
127 | 
128 | # TABS
129 | 
130 | ::: tabs
131 | 
132 | # Linux
133 | 
134 | ## Support for Linux users
135 | 
136 | Create a shell script
137 | 
138 | # Mac
139 | 
140 | ## Support for Mac users
141 | 
142 | Do it with Cmd.
143 | 
144 | # Windows
145 | 
146 | ## Support for windows users
147 | 
148 | Do it with Ctrl
149 | 
150 | :::
151 | 
152 | 
153 | 
154 | ::: quiz
155 | 
156 | # this is the question?
157 | 
158 | * at the start
159 | * something else
160 |   * feedback for this
161 | * the end
162 | 
163 | :::
164 | 
165 | 
166 | 
167 | 
168 | ::: {.quiz .carousel}
169 | 
170 | # 2 most frequent questions
171 | Earn points for the exam
172 | 
173 | 
174 | # Which bootstrap component can be swyped?
175 | * Carousel
176 |   * Perfect! yes the carousel has controls to swype on mobile and click on desktop.
177 | 		Second paragraph of feedback
178 | * Accordion
179 | * Alert
180 | * Carddeck
181 | 
182 | # Which language takes indentation very seriously?
183 | * javascript
184 | * Php
185 | * Python
186 |   * yes in Python indenting code is very important
187 | 
188 | 
189 | :::
190 | 
191 | 
192 | # BUTTONS
193 | 
194 | [Pandoc repository](https://github.com/pandoc)
195 | 
196 | [Pandoc repository](https://github.com/pandoc){.success}
197 | 
198 | 
199 | # EMBEDS
200 | 
201 | [Moodle Bootstrap Design](https://www.youtube.com/watch?v=Uz7XbIxHf-4)
202 | 
203 | 
204 | [Youtube video with sharing links](https://www.youtube.com/watch?v=JdeyVMi2W8U){.social}
205 | 
206 | 
207 | # Icons
208 | 
209 | I love []{.bi .bi-bootstrap} with markdown.
210 | 
211 | 
212 | 
213 | # normal chapter
214 | * a normal list
215 | * with items
216 | * or more
217 | * to finish


--------------------------------------------------------------------------------
/md-to-bootstrap5.lua:
--------------------------------------------------------------------------------
  1 | --[[
  2 | -- title:  Markdown to Bootstrap Lua filter for Pandoc
  3 | -- author: François Parlant
  4 | -- with lots of help from tarleb
  5 | -- version: 0.1
  6 | --]]
  7 | 
  8 | -- TODO mytoc
  9 | local filter_class, normal_filter, special_filter, carousel_filter, tabs_filter, accordion_filter, card_filter, carddeck_filter, alert_filter, jumbotron_filter, quiz_filter
 10 | local mytoc=''
 11 | local num = 1
 12 | local section_num = 0
 13 | local paranum = 0
 14 | local tabs_title_list = ''
 15 | local tabs_h1_num =0
 16 | local accordion_h1_num =0
 17 | local carousel_h1_num =0
 18 | local icon_prefix ='bi'
 19 | 
 20 | 
 21 | 
 22 | -- jumbo
 23 | -- TODO stop section to add "Display-4" from title or stop section
 24 | jumbotron_filter = {
 25 |   traverse = 'topdown',
 26 |   Header = function(el)
 27 |     local mytitle = pandoc.utils.stringify(el)
 28 |     el.classes = {'display-4'}
 29 | 	-- print(make_id(pandoc.Inlines (pandoc.utils.stringify(el))))
 30 |     return el
 31 |   end,
 32 |   Para = function (para) 
 33 | 	paranum = paranum + 1
 34 |       if paranum == 1  then
 35 | 		  
 36 | 		  
 37 |         return pandoc.Plain(
 38 | 			{pandoc.RawInline('html', '<p class="lead">')} ..
 39 | 			para.content ..
 40 | 			{pandoc.RawInline('html', '</p>\n<hr class="my-4"/>')}
 41 | 		)
 42 | 	  else
 43 | 	    return para
 44 |       end
 45 |   end
 46 | 
 47 | }
 48 | 
 49 | -- alert
 50 | alert_filter = {
 51 |   traverse = 'topdown',
 52 |   print("ALERT")
 53 | }
 54 | 
 55 | 
 56 | -- card
 57 | -- TODO put a card-body div around the content
 58 | card_filter = {
 59 |   traverse = 'topdown',
 60 |   Header = function(el)
 61 |     local mytitle = pandoc.utils.stringify(el)
 62 |     el.classes = {'specialHeader'}
 63 | 	print(make_id(pandoc.Inlines (pandoc.utils.stringify(el))))
 64 |     return el
 65 |   end,
 66 |   Div = function (el)
 67 | 		print('CARD:::'..el.classes[1])
 68 |     if el.classes[1] == 'header' then
 69 | 		-- mylist =  mylist .. '</ul>\n'
 70 | 		el.classes = {'card-header'}
 71 | 		return el
 72 | 	elseif el.classes[1] == 'footer' then
 73 | 		el.classes = {'card-footer'}
 74 | 		return el
 75 | 	else
 76 | 		return el
 77 | 	end
 78 |   end
 79 | }
 80 | 
 81 | -- cardddeck
 82 | -- NOT DONE
 83 | carddeck_filter = {
 84 |   traverse = 'topdown',
 85 |   Header = function(el)
 86 |     local mytitle = pandoc.utils.stringify(el)
 87 |     el.classes = {'specialHeader'}
 88 | 	print(make_id(pandoc.Inlines (pandoc.utils.stringify(el))))
 89 |     return el
 90 |   end,
 91 |   BulletList = function (el)
 92 |     local mylist ='<ul >\n'
 93 |     for i, item in ipairs(el.content) do
 94 |       local first = item[1]
 95 |       if first  then
 96 |         mylist =  mylist .. '<li class="special-item">' .. pandoc.utils.stringify(first) ..  '</li>\n'
 97 |       end
 98 |     end
 99 |     mylist =  mylist .. '</ul>\n'
100 |     return pandoc.RawInline('html', mylist)
101 |   end
102 | }
103 | 
104 | 
105 | 
106 | 
107 | -- carousel
108 | carousel_filter = {
109 |   traverse = 'topdown',
110 |   Header = function(el)
111 |     if el.level==1 then 
112 | 		local active ='active'
113 | 		local before =''
114 | 		carousel_h1_num = carousel_h1_num + 1
115 | 		if carousel_h1_num == 1 then 
116 | 			active = 'active' 
117 | 			before = ''
118 | 		else
119 | 			active=''
120 | 			before ='</div>'
121 | 		end
122 | 		-- TODO add the num of the carousel in case
123 | 		-- there are more than one in the document
124 | 		local pre =pandoc.RawBlock('html',before..[[
125 | 			<div class="carousel-item ]]..active..[["><h2>
126 | 		]])
127 | 		local post =pandoc.RawBlock('html','</h2>')
128 | 		local content = el.content
129 | 		table.insert(content,1,pre)
130 | 		table.insert(content, post)
131 | 		return content
132 | 	else
133 | 		return el
134 | 	end
135 | 	
136 |   end
137 | }
138 | 
139 | 
140 | 
141 | 
142 | 
143 | 
144 | 
145 | -- Accordion
146 | accordion_filter = {
147 |   traverse = 'topdown',
148 |   Header = function(el)
149 |     if el.level==1 then 
150 | 		local show ='show'
151 | 		local before =''
152 | 		accordion_h1_num = accordion_h1_num + 1
153 | 		if accordion_h1_num == 1 then 
154 | 			show = 'show' 
155 | 			before = ''
156 | 		else
157 | 			show=''
158 | 			before ='</div></div></div>'
159 | 		end
160 | 		-- TODO add the num of the accordion in case
161 | 		-- there are more than one in the document
162 | 		local pre =pandoc.RawBlock('html',before..[[
163 | 	
164 |   <div class="accordion-item">
165 |     <h2 class="accordion-header" id="heading]]..accordion_h1_num..[[">
166 |       <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse]]..accordion_h1_num..[[" aria-expanded="true" aria-controls="collapse]]..accordion_h1_num..[[">
167 |         ]]..pandoc.utils.stringify(el) ..[[
168 |       </button>
169 |     </h2>
170 |     <div id="collapse]]..accordion_h1_num..[[" class="accordion-collapse collapse ]].. show..[[" aria-labelledby="heading]]..accordion_h1_num..[[" data-bs-parent="#accordionExample">
171 |       <div class="accordion-body">
172 | 	
173 | 		]])
174 | 		local post =pandoc.RawBlock('html','')
175 | 		local content = el.content
176 | 		table.insert(content,1,pre)
177 | 		table.insert(content, post)
178 | 		return content
179 | 	else
180 | 		return el
181 | 	end
182 | 	
183 |   end
184 | }
185 | 
186 | 
187 | 
188 | -- Tabs
189 | tabs_filter = {
190 |   traverse = 'topdown',
191 |   Header = function(el)
192 | 	-- we need to process twice the level 1 headings
193 | 	-- once to create the card header
194 | 	-- once to process the content
195 |     if el.level==1 then 
196 | 	 print("TABS_TITLE_1")
197 | 	 -- create the tab header
198 | 		local show = ''
199 | 		-- we want to add the "show active" class only to the first h1
200 | 		tabs_h1_num = tabs_h1_num + 1
201 | 		if tabs_h1_num == 1 then show = 'show active' end
202 | 		tabs_title_list = tabs_title_list .. '<li class="nav-item"><a class="nav-link '..show..'" data-bs-toggle="tab" href="#menu'..tabs_h1_num..'">'.. pandoc.utils.stringify(el) ..'</a></li>'
203 | 			show ='' 
204 | 		
205 | 	-- create the tab content
206 | 		local active = ''
207 | 		local pre =''
208 | 
209 | 		if tabs_h1_num == 1 then
210 | 			active = ''
211 | 			-- we close the tab header and we add active
212 | 			pre = pandoc.RawBlock('html','</ul></div> \n\n<div class="tab-content border-left border-right border-bottom ">\n\t<div id="menu'..tabs_h1_num..'" class="tab-pane fade in active show border p-3"><h1>')
213 | 		else
214 | 			-- we close previous menu and we start the menu
215 | 			pre = pandoc.RawBlock('html','</div><div id="menu'..tabs_h1_num..'" class="tab-pane fade in border p-3"><h1>')
216 | 		end
217 | 		local post =pandoc.RawBlock('html','</h1>')
218 | 		local content = el.content
219 | 		table.insert(content,1,pre)
220 | 		table.insert(content, post)
221 | 		return content
222 | 	else
223 | 		return el
224 | 	end
225 | 		
226 | 
227 | 	
228 |   end
229 | }
230 | 
231 | 
232 | 
233 | 
234 | --[[
235 | NORMAL FILTER
236 | For everything outside a special filter
237 | --]]
238 | normal_filter = {
239 |   traverse = 'topdown',
240 |   Meta = function(metadata)
241 | 	-- set the icon_prefix from Yaml front Matter if exists
242 | 	if metadata.iconprefix then 
243 | 	print("Icon_prefix: "..pandoc.utils.stringify(metadata.iconprefix))
244 | 		icon_prefix = pandoc.utils.stringify(metadata.iconprefix) 
245 | 	end
246 |   -- Gets the toc and pass it to the template via metadata
247 | 	-- metadata.toc = pandoc.RawInline('html',"<!-- test -->"..mytoc)
248 | 	-- if metadata.direction then direction = metadata.direction end
249 | 	if metadata.url then url = metadata.url end
250 | 	local t = pandoc.utils.stringify(metadata.title)
251 | 	local u = pandoc.utils.stringify(metadata.url)
252 | 	local link = pandoc.Link(t,u)
253 | 	local socialblock = make_social(link, false)
254 | 	metadata.socialblock = socialblock
255 | 	return metadata
256 |   end,
257 |   Header = function (el)
258 | 	local mytitle = pandoc.utils.stringify(el)
259 | 	if el.level == 1 then el.classes = {"display-2"} end
260 | 	el.identifier = "title"..num
261 | 	print(make_id(pandoc.Inlines (pandoc.utils.stringify(el))))
262 | 	-- mytoc = mytoc ..'<li><a href="#title'..num..'">'..el.content[1].text..'</a></li>'
263 | 	addToToc(el)
264 |     return el
265 |   end,
266 |   Link = function(el)
267 |   print(el.target) 
268 | 	-- check if the link is a youtube video
269 | 	-- turn it into an embed
270 | 	if string.match(el.target, "(https://www%.youtube%.com/watch%?v=)(.+)" ) then 
271 | 	a,b = string.match(el.target, "(https://www%.youtube%.com/watch%?v=)(.+)" )
272 | 	-- inlude social networks if class is social
273 | 	local socialblock =''
274 | 	if el.classes[1] and el.classes[1] == "social" then 
275 | 		num= num + 1
276 | 		socialblock = [[
277 | 		<div class="btn-group pull-end" role="group">
278 | 			<button id="btnGroupDrop]]..num..[[" type="button" class="btn btn-Light dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
279 | 			  Share
280 | 			</button>
281 | 			<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="btnGroupDrop]]..num..[[">]]	
282 | 			..make_social(el, false, 'string')..[[
283 | 			</ul>
284 | 		</div>
285 | 		]]
286 | 		
287 | 		
288 | 		print(socialblock)
289 | 
290 | 		
291 | 	end
292 | 	embed = [[
293 | 		
294 | 		<div class="ratio ratio-16x9">
295 | 				<iframe  src="https://www.youtube.com/embed/]]..b..[[?rel=0" allowfullscreen></iframe>
296 | 		</div>
297 | 		]]..socialblock..[[
298 | 			
299 | 			
300 | 	]]
301 | 	print(b) 
302 | 	return pandoc.RawInline('html',embed)
303 | 	else
304 | 		-- if it is not a youtube video, turn it into a button
305 | 		local  c ='primary'
306 | 		if el.classes[1] then c = el.classes[1] end
307 | 			el.classes = {'btn','btn-'..c}
308 | 		return el
309 | 	end
310 |   end,
311 |   BulletList = function (el)
312 |     local mylist ='<ul >\n'
313 |     for i, item in ipairs(el.content) do
314 |       local first = item[1]
315 |       if first  then
316 |         mylist =  mylist .. '<li class="list-group-item">' .. pandoc.utils.stringify(first) ..  '</li>\n'
317 |       end
318 |     end
319 |     mylist =  mylist .. '</ul>\n'
320 |     return pandoc.RawInline('html', mylist)
321 |   end,
322 | 
323 | --[[
324 | Very important part. 
325 | This where we assign filters.
326 | --]]
327 |   Div = function (div)
328 |     if div.classes[1] == 'carousel' then
329 | 	  return make_carousel(div)
330 | 	elseif div.classes[1] == 'quiz' then
331 |       filter = quiz_filter
332 | 	  -- return make_carousel(div)
333 | 	elseif div.classes[1] == 'card' then
334 |       filter = card_filter
335 | 	elseif div.classes[1] == 'jumbotron' then
336 | 	  return make_jumbotron(div)
337 | 	elseif div.classes[1] == 'accordion' then
338 | 		return make_accordion(div)
339 | 	elseif div.classes[1] == 'tabs' then
340 | 	  return make_tabs(div)
341 | 	elseif (div.classes[1] == 'primary' or div.classes[1] == 'secondary' or div.classes[1] == 'light' or div.classes[1] == 'dark' or div.classes[1] == 'info' or div.classes[1] == 'danger' or div.classes[1] == 'warning') then
342 | 	  div.classes = {'alert','alert-'..div.classes[1]}
343 |       filter = alert_filter
344 |     else
345 |       filter = normal_filter
346 |     end	
347 | 	return div:walk(filter), false
348 |   end
349 | }
350 | 
351 | Pandoc = function (doc)
352 |   -- return doc:walk(normal_filter)
353 |   doc.meta.toc = pandoc.RawInline('html',mytoc)
354 |   return makeTOC(doc:walk(normal_filter))
355 | end
356 | 
357 | 
358 | function make_jumbotron(div)
359 | 	local content = pandoc.walk_block(div,jumbotron_filter).content
360 | 	local pre = pandoc.RawBlock('html','<section class="p-2 p-md-5 rounded-lg mt-3 '..makeClassesString(div.classes)..'">')
361 | 	local post = pandoc.RawBlock('html','</section>')
362 | 	table.insert(content,1,pre)
363 | 	table.insert(content, post)
364 | 	paranum = 0
365 | 	return content
366 | end
367 | 
368 | 
369 | function make_quiz(div)
370 | 	
371 | end
372 | 
373 | 
374 | -- quiz
375 | 
376 | 
377 | quiz_filter = {
378 |   traverse = 'topdown',
379 |   Header = function(el)
380 |     local mytitle = pandoc.utils.stringify(el)
381 |     el.classes = {'specialHeader'}
382 | 	print(make_id(pandoc.Inlines (pandoc.utils.stringify(el))))
383 |     return el
384 |   end,
385 |   BulletList = function (el)
386 |     local mylist ='<ul class="list-group list-group-flush">\n'
387 |     for i, item in ipairs(el.content) do
388 |       local first = item[1]
389 |       if first  then
390 |         mylist =  mylist .. '<li class="special-item">' .. pandoc.utils.stringify(first) ..  '</li>\n'
391 |       end
392 |     end
393 |     mylist =  mylist .. '</ul>\n'
394 |     return pandoc.RawInline('html', mylist)
395 |   end
396 | }
397 | 
398 | 
399 | quiz_filter0 = {
400 |   traverse = 'topdown',
401 |   Header = function(el)
402 |     local mytitle = pandoc.utils.stringify(el)
403 |     el.classes = {'specialHeader'}
404 | 	print(make_id(pandoc.Inlines (pandoc.utils.stringify(el))))
405 |     return el
406 |   end,
407 |   BulletList = function (el)
408 |     local mylist ='<ul class="list-group list-group-flush">\n'
409 |     for i, item in ipairs(el.content) do
410 |       local first = item[1]
411 |       if first  then
412 |         mylist =  mylist .. '<li class="special-item">' .. pandoc.utils.stringify(first) ..  '</li>\n'
413 |       end
414 |     end
415 |     mylist =  mylist .. '</ul>\n'
416 |     return pandoc.RawInline('html', mylist)
417 |   end
418 | }
419 | 
420 | 
421 | 
422 | 
423 | 
424 | 
425 | 
426 | -- create a string with spaces from a classes table
427 | function makeClassesString(o)
428 |     --if type(o) == 'table' then
429 |         local s = ''
430 |         for k,v in pairs(o) do
431 |                 -- if type(k) ~= 'number' then k = '"'..k..'"' end
432 |                 -- s = s .. '['..k..'] = ' .. dump(v) .. ','
433 | 				s = s .. v.." "
434 |         end
435 | 		return s
436 | 	--end
437 | end
438 | 
439 | 
440 | 
441 | function make_accordion(div)
442 |       -- filter = accordion_filter
443 | 	  local content = pandoc.walk_block(div,accordion_filter).content
444 | 	  -- TODO change id of the accordion to be variable
445 | 	  local pre = pandoc.RawBlock('html','<div class="accordion" id="accordionExample">')
446 | 	  local post = pandoc.RawBlock('html','</div></div></div></div>')
447 | 	  table.insert(content,1,pre)
448 | 	  table.insert(content, post)
449 | 	  -- reset accordion_h1_num for another tab in document
450 | 	  accordion_h1_num = 0
451 | 	  return content
452 | end
453 | 
454 | 
455 | 
456 | 
457 | 
458 | function make_carousel(div)
459 | 	section_id = section_num + 1
460 |       filter = carousel_filter
461 | 	  local content = pandoc.walk_block(div,carousel_filter).content
462 | 	  local pre = pandoc.RawBlock('html','<div id="carousel'..section_id..'" class="carousel slide" data-bs-ride="carousel">\n<div class="carousel-inner">')
463 | 	  local post = pandoc.RawBlock('html',[[    </div>
464 | 		  </div>
465 | 		  <button class="carousel-control-prev" type="button" data-bs-target="#carousel]]..section_id..[[" data-bs-slide="prev">
466 | 			<span class="carousel-control-prev-icon" aria-hidden="true"></span>
467 | 			<span class="visually-hidden">Previous</span>
468 | 		  </button>
469 | 		  <button class="carousel-control-next" type="button" data-bs-target="#carousel]]..section_id..[[" data-bs-slide="next">
470 | 			<span class="carousel-control-next-icon" aria-hidden="true"></span>
471 | 			<span class="visually-hidden">Next</span>
472 | 		  </button>
473 | 		</div>]])
474 | 	  table.insert(content,1,pre)
475 | 	  table.insert(content, post)
476 | 	  -- reset carousel_h1_num for another tab in document
477 | 	  carousel_h1_num = 0
478 | 	  return content
479 | end
480 | 
481 | function make_tabs(div)
482 |       -- filter = tabs_filter
483 | 	  -- we need to insert the tab header 
484 | 	  -- before we add the content
485 | 	  local content = pandoc.walk_block(div,tabs_filter).content 
486 | 	  local pre = pandoc.RawBlock('html','<div class="card-header"><ul class="nav nav-pills card-header-pills" style="list-style-type: none;">'..tabs_title_list..'</ul></div><div class="tab-content border-left border-right border-bottom ">')
487 | 	  -- we close last menu and content
488 | 	  local post = pandoc.RawBlock('html','</div></div>')
489 | 	  table.insert(content,1,pre)
490 | 	  table.insert(content, post)
491 | 	  -- reset tabs_h1_num for another tab in document
492 | 	  tabs_h1_num = 0
493 | 	  return content
494 | 
495 | end
496 | 
497 | 
498 | function make_id (inlines, via)
499 |   local via = via or 'html'
500 |   local heading = pandoc.Header(1, inlines)
501 |   local temp_doc = pandoc.Pandoc{heading}
502 |   local roundtripped_doc = pandoc.read(pandoc.write(temp_doc, via), via)
503 |   return roundtripped_doc.blocks[1].identifier
504 | end
505 | 
506 | function sanitize_string(source)
507 |     return source:gsub("%W", function(ch)
508 |         return string.gsub(string.format("%%%02X", ch:byte())," ","")
509 |     end)
510 | end
511 | 
512 | function addToToc(el)
513 | 	print("TOC: "..pandoc.utils.stringify(el))
514 | 	mytoc = mytoc ..'<li class="mb-1"><a class="link-dark rounded" href="#title'..num..'">'.. pandoc.utils.stringify(el).."</a></li>"
515 | 	num = num + 1
516 | 	return true
517 | end
518 | 
519 | 
520 | 
521 | 
522 | 
523 | 
524 | 
525 | function make_social(el, includelink, result)
526 | 	-- local post = make_social(el)
527 | 	local content=pandoc.utils.stringify(el.content)
528 | 	local content_e = urlencode(content)
529 | 	local target = el.target
530 | 	local target_e = urlencode(target)
531 | 	-- local mysocial = '<span>finished</span>'
532 | 	local mysocial = [[
533 | 	
534 | 	
535 | 	<li><a class="dropdown-item" href="https://www.facebook.com/sharer/sharer.php?u=]]..target_e..[["><i class="]]..icon_prefix..[[ ]]..icon_prefix..[[-facebook p-3"></i> Facebook</a></li>
536 | 	
537 | 	
538 | 	<li><a class="dropdown-item" href="http://twitter.com/intent/tweet?text=]]..content_e..[[&url=]]..target_e..[["><i class="]]..icon_prefix..[[ ]]..icon_prefix..[[-twitter p-3"></i> Twitter</a></li>
539 | 	
540 | 	<li><a class="dropdown-item" href="http://www.linkedin.com/shareArticle?mini=true&url=]]..target_e..[[&title=]]..content_e..[["><i class="]]..icon_prefix..[[ ]]..icon_prefix..[[-linkedin p-3"></i> LinkedIn</a></li>
541 | 	
542 | 	<li><a class="dropdown-item" href="https://wa.me/?text=]]..content_e..[[%20]]..target_e..[["><i class="]]..icon_prefix..[[ ]]..icon_prefix..[[-whatsapp p-3"></i> Whatsapp</a></li>
543 | 	
544 | 	<li><a class="dropdown-item" href="https://telegram.me/share/url?url=]]..target_e..[[&text=]]..content_e..[["><i class="]]..icon_prefix..[[ ]]..icon_prefix..[[-telegram p-3"></i> Telegram</a></li>
545 | 	
546 | 	<li><a class="dropdown-item" href="mailto:?subject=Super%2
547 | 	0link&body=]]..target_e..[[%0D%0A]]..content_e..[["><i class="]]..icon_prefix..[[ ]]..icon_prefix..[[-envelope p-3"></i> Mail</a></li>
548 | 	
549 | 
550 | 	]]
551 | 	
552 | 	local post = pandoc.RawInline('html',mysocial)
553 | 	-- print(el.content)
554 | 	if result == 'string' then return mysocial end
555 | 	if includelink == false then
556 | 		return post
557 | 	else
558 | 		return {el, post}
559 | 	end
560 | end
561 | 
562 | -- we need to modify the doc AT THE END to add the toc
563 | function makeTOC(doc)
564 | 	doc.meta.toc = pandoc.RawInline('html',"<!-- test 2-->\n"..mytoc)
565 | 	return doc
566 | end
567 | 
568 | 
569 | --used to create the social links url with special chars converted to hex
570 | function urlencode (str)
571 |    str = string.gsub (str, "([^0-9a-zA-Z!'()*._~-])", -- locale independent
572 |       function (c) return string.format ("%%%02X", string.byte(c)) end)
573 |    --str = string.gsub (str, " ", "+")
574 |    return str
575 | end
576 | 
577 | 
578 | 
579 | 
580 | 
581 | 
582 | 


--------------------------------------------------------------------------------
/media/accordion.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fxpar/markdown-to-bootstrap-pandoc-lua-filter/0c2d7a23872bec52c35df3eae282848ff64ea7f6/media/accordion.gif


--------------------------------------------------------------------------------
/media/alertdanger.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fxpar/markdown-to-bootstrap-pandoc-lua-filter/0c2d7a23872bec52c35df3eae282848ff64ea7f6/media/alertdanger.png


--------------------------------------------------------------------------------
/media/alertinfo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fxpar/markdown-to-bootstrap-pandoc-lua-filter/0c2d7a23872bec52c35df3eae282848ff64ea7f6/media/alertinfo.png


--------------------------------------------------------------------------------
/media/button.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fxpar/markdown-to-bootstrap-pandoc-lua-filter/0c2d7a23872bec52c35df3eae282848ff64ea7f6/media/button.png


--------------------------------------------------------------------------------
/media/buttonsuccess.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fxpar/markdown-to-bootstrap-pandoc-lua-filter/0c2d7a23872bec52c35df3eae282848ff64ea7f6/media/buttonsuccess.png


--------------------------------------------------------------------------------
/media/card.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fxpar/markdown-to-bootstrap-pandoc-lua-filter/0c2d7a23872bec52c35df3eae282848ff64ea7f6/media/card.png


--------------------------------------------------------------------------------
/media/carousel.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fxpar/markdown-to-bootstrap-pandoc-lua-filter/0c2d7a23872bec52c35df3eae282848ff64ea7f6/media/carousel.gif


--------------------------------------------------------------------------------
/media/carouselquiz.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fxpar/markdown-to-bootstrap-pandoc-lua-filter/0c2d7a23872bec52c35df3eae282848ff64ea7f6/media/carouselquiz.gif


--------------------------------------------------------------------------------
/media/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fxpar/markdown-to-bootstrap-pandoc-lua-filter/0c2d7a23872bec52c35df3eae282848ff64ea7f6/media/icon.png


--------------------------------------------------------------------------------
/media/jumbotron.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fxpar/markdown-to-bootstrap-pandoc-lua-filter/0c2d7a23872bec52c35df3eae282848ff64ea7f6/media/jumbotron.png


--------------------------------------------------------------------------------
/media/quiz.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fxpar/markdown-to-bootstrap-pandoc-lua-filter/0c2d7a23872bec52c35df3eae282848ff64ea7f6/media/quiz.gif


--------------------------------------------------------------------------------
/media/tabs.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fxpar/markdown-to-bootstrap-pandoc-lua-filter/0c2d7a23872bec52c35df3eae282848ff64ea7f6/media/tabs.gif


--------------------------------------------------------------------------------
/media/youtube.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fxpar/markdown-to-bootstrap-pandoc-lua-filter/0c2d7a23872bec52c35df3eae282848ff64ea7f6/media/youtube.png


--------------------------------------------------------------------------------
/template/README.md:
--------------------------------------------------------------------------------
 1 | # Bootstrap Template for pandoc
 2 | 
 3 | A template to add some basic bootstrap architecture around a document.
 4 | 
 5 | 
 6 | * meta
 7 | 	* title
 8 | 	* author
 9 | 	* description
10 | 	* base
11 | * css
12 | 	* bootstrap 5 min
13 | 	* bootstrap icons
14 | 	* sidebar (for turning chevrons)
15 | * scripts
16 | 	* bootstrap 5 min
17 | * sidebar
18 | 	* table of content
19 | 	
20 | 
21 | ## Usage
22 | 
23 | This template can be applied to other formats than markdown.
24 | 
25 | pandoc input.md --template bs5.template.html -o output.html
26 | 
27 | 
28 | 
29 | ## Markdown
30 | 
31 | ```
32 | ---
33 | title: Markdown to Bootstrap
34 | author: François Parlant
35 | description: Pandoc Lua filter to convert markdown code into Beautiful Bootstrap components (carousel, accordion, cards, jumbotrons...)
36 | 
37 | ---
38 | 
39 | # title one of the document
40 | 
41 | Some introduction text
42 | 
43 | ## A level 2 title
44 | 
45 | Some text
46 | 
47 | # another level 1 title
48 | 
49 | More text
50 | 
51 | ```
52 | 
53 | ## References
54 | 
55 | * Used by the [markdown to bootstrap](https://github.com/fxpar/markdown-to-bootstrap-pandoc-lua-filter) components filter
56 | 


--------------------------------------------------------------------------------
/template/bs5.template.html:
--------------------------------------------------------------------------------
  1 | <html>
  2 | <head>
  3 | <meta charset="utf-8">
  4 | <meta name="viewport" content="width=device-width, initial-scale=1">
  5 | $if(author)$ <meta name="author" content="$author$">   $endif$
  6 | $if(title)$ <title>$title$</title>   $endif$
  7 | 
  8 | 
  9 | <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.3/font/bootstrap-icons.css">
 10 | <!-- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
 11 | <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script> -->
 12 | 
 13 | <link href="css/sidebar.css" rel="stylesheet">
 14 | 	<style>
 15 | 		@media (min-width:1025px) { body { width: 50% !important; margin-left:25vw !important;} }
 16 | 	</style>
 17 | 	
 18 | 
 19 | <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
 20 | <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
 21 | 
 22 | 
 23 | </head>
 24 | <body class="">
 25 | 
 26 | <!-- permet de réduire à 50% sur ordinateur -->
 27 | <div class="container ">
 28 | 
 29 | 
 30 | <nav class="navbar sticky-top navbar-light bg-light">
 31 |   <div class="container-fluid">
 32 |     <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample" aria-expanded="false" aria-label="Toggle navigation">
 33 |       <span class="navbar-toggler-icon"></span>
 34 |     </button>
 35 | 	
 36 | 	<!-- Sharing links dropdown -->
 37 | 	$if(socialblock)$
 38 | 	<div class="btn-group" role="group">
 39 | 		<button id="btnGroupDrop1" type="button" class="btn btn-Light dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
 40 | 		  Share
 41 | 		</button>
 42 | 		<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="btnGroupDrop1">
 43 | 		
 44 | 		$socialblock$
 45 | 		 </ul>
 46 |   </div>
 47 | 	
 48 | 	</div>
 49 | 	$endif$
 50 | 	
 51 | 
 52 | </nav>
 53 | 
 54 | <div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel" >
 55 |   <div class="offcanvas-header">
 56 |     <h5 class="offcanvas-title" id="offcanvasExampleLabel">$if(title)$ $title$   $endif$</h5>
 57 |     <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
 58 |   </div>
 59 |   <div class="offcanvas-body">
 60 | 
 61 | 	<ul class="list-unstyled ps-0">
 62 |         <li class="border-top my-3"></li>
 63 | 		$if(toc)$
 64 | 		<li class="mb-1">
 65 | 			<button class="btn btn-toggle align-items-center rounded" data-bs-toggle="collapse" data-bs-target="#nav-content" aria-expanded="true">Content</button>
 66 | 			<div id="nav-content" class="collapse show" >
 67 | 				<ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small"  data-bs-dismiss="offcanvas">
 68 | 		 
 69 |           $toc$   
 70 | 		  
 71 | 		</ul>
 72 | 			</div>
 73 | 		</li>
 74 | 		<li class="border-top my-3"></li>
 75 | 		
 76 | 		  $endif$
 77 | 		  
 78 | 		 <li class="mb-1">
 79 | 			<button class="btn btn-toggle align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#presentation-collapse" aria-expanded="true">Learn More</button>
 80 | 			<div id="presentation-collapse" class="collapse show" >
 81 | 				<ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small" data-bs-dismiss="offcanvas">
 82 | 					<li><a class="nav-link link-dark rounded" href="https://getbootstrap.com"><i class="bi-bootstrap me-2"></i> Bootstrap</a></li>
 83 | 					<li><a class="nav-link link-dark rounded" href="https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax"><i class="bi-github me-2"></i>Markdown</a></li>
 84 | 					<li><a class="nav-link link-dark rounded" href="https://pandoc.org/"><i class="bi-globe me-2"></i>Pandoc</a></li>
 85 | 					<li><a class="nav-link link-dark rounded" href="https://pandoc.org/lua-filters.html"><i class="bi-globe me-2"></i>Lua Filters</a></li>
 86 | 					
 87 | 
 88 | 				</ul>
 89 | 			</div>
 90 | 		</li>
 91 | 		<li class="border-top my-3"></li>
 92 | 		<li><a class="nav-link link-dark rounded" href="https://www.linkedin.com/in/francois-parlant/"><i class="bi-linkedin me-2"></i>François Parlant</a></li>
 93 | 	</ul>
 94 |    
 95 | 		  </div>
 96 | 		</div>
 97 | 		 $if(title)$<h1 class="title">$title$</h1>$endif$
 98 | 		 
 99 | 	  $for(include-before)$
100 |       $include-before$
101 |       $endfor$ 
102 | 		 
103 |       $body$
104 | 	  
105 |       $for(include-after)$
106 |       $include-after$
107 |       $endfor$
108 | </div>
109 |    </body>
110 | </html>


--------------------------------------------------------------------------------
/test/bs5.bat:
--------------------------------------------------------------------------------
 1 | pandoc input.md --lua-filter ..\docs\md-to-bootstrap5.lua --template ..\template\bs5.template.html -o result-v2.html
 2 | 
 3 | 
 4 | pandoc sample.md --lua-filter bootstrap.lua -o result.html --template bs5.template.html -f markdown+inline_code_attributes
 5 | 
 6 | 
 7 | 
 8 | 
 9 | 
10 | -f commonmark+attributes
11 | 
12 | ou 
13 | 
14 | -f markdown+raw_attribute
15 | -f markdown+inline_code_attributes
16 | 
17 | -f gsm+task_lists
18 | 


--------------------------------------------------------------------------------
/test/css/sidebar.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |   min-height: 100vh;
 3 |   min-height: -webkit-fill-available;
 4 | }
 5 | 
 6 | html {
 7 |   height: -webkit-fill-available;
 8 | }
 9 | 
10 | main {
11 |   display: flex;
12 |   flex-wrap: nowrap;
13 |   height: 100vh;
14 |   height: -webkit-fill-available;
15 |   max-height: 100vh;
16 |   overflow-x: auto;
17 |   overflow-y: hidden;
18 | }
19 | 
20 | .b-example-divider {
21 |   flex-shrink: 0;
22 |   width: 1.5rem;
23 |   height: 100vh;
24 |   background-color: rgba(0, 0, 0, .1);
25 |   border: solid rgba(0, 0, 0, .15);
26 |   border-width: 1px 0;
27 |   box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
28 | }
29 | 
30 | .bi {
31 |   vertical-align: -.125em;
32 |   pointer-events: none;
33 |   fill: currentColor;
34 | }
35 | 
36 | .dropdown-toggle { outline: 0; }
37 | 
38 | .nav-flush .nav-link {
39 |   border-radius: 0;
40 | }
41 | 
42 | .btn-toggle {
43 |   display: inline-flex;
44 |   align-items: center;
45 |   padding: .25rem .5rem;
46 |   font-weight: 600;
47 |   color: rgba(0, 0, 0, .65);
48 |   background-color: transparent;
49 |   border: 0;
50 | }
51 | .btn-toggle:hover,
52 | .btn-toggle:focus {
53 |   color: rgba(0, 0, 0, .85);
54 |   background-color: #d2f4ea;
55 | }
56 | 
57 | .btn-toggle::before {
58 |   width: 1.25em;
59 |   line-height: 0;
60 |   content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%280,0,0,.5%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
61 |   transition: transform .35s ease;
62 |   transform-origin: .5em 50%;
63 | }
64 | 
65 | .btn-toggle[aria-expanded="true"] {
66 |   color: rgba(0, 0, 0, .85);
67 | }
68 | .btn-toggle[aria-expanded="true"]::before {
69 |   transform: rotate(90deg);
70 | }
71 | 
72 | .btn-toggle-nav a {
73 |   display: inline-flex;
74 |   padding: .1875rem .5rem;
75 |   margin-top: .125rem;
76 |   margin-left: 1.25rem;
77 |   text-decoration: none;
78 | }
79 | .btn-toggle-nav a:hover,
80 | .btn-toggle-nav a:focus {
81 |   background-color: #d2f4ea;
82 | }
83 | 
84 | .scrollarea {
85 |   overflow-y: auto;
86 | }
87 | 
88 | .fw-semibold { font-weight: 600; }
89 | .lh-tight { line-height: 1.25; }
90 | 


--------------------------------------------------------------------------------
/test/result-v2.html:
--------------------------------------------------------------------------------
  1 | <html>
  2 | <head>
  3 | <meta charset="utf-8">
  4 | <meta name="viewport" content="width=device-width, initial-scale=1">
  5 |  <meta name="author" content="François Parlant">   
  6 |  <title>Markdown to Bootstrap</title>   
  7 | 
  8 | 
  9 | <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.3/font/bootstrap-icons.css">
 10 | <!-- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
 11 | <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script> -->
 12 | 
 13 | <link href="css/sidebar.css" rel="stylesheet">
 14 | 	<style>
 15 | 		@media (min-width:1025px) { body { width: 50% !important; margin-left:25vw !important;} }
 16 | 	</style>
 17 | 	
 18 | 
 19 | <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
 20 | <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
 21 | 
 22 | 
 23 | </head>
 24 | <body class="">
 25 | 
 26 | <!-- permet de réduire à 50% sur ordinateur -->
 27 | <div class="container ">
 28 | 
 29 | 
 30 | <nav class="navbar sticky-top navbar-light bg-light">
 31 |   <div class="container-fluid">
 32 |     <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample" aria-expanded="false" aria-label="Toggle navigation">
 33 |       <span class="navbar-toggler-icon"></span>
 34 |     </button>
 35 | 	
 36 | 	<!-- Sharing links dropdown -->
 37 | 		<div class="btn-group" role="group">
 38 | 		<button id="btnGroupDrop1" type="button" class="btn btn-Light dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
 39 | 		  Share
 40 | 		</button>
 41 | 		<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="btnGroupDrop1">
 42 | 		
 43 | 			
 44 | 	
 45 | 	<li><a class="dropdown-item" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Ffxpar.github.io%2FPandoc-Lua-Markdown-Bootstrap%2F"><i class="bi bi-facebook p-3"></i> Facebook</a></li>
 46 | 	
 47 | 	
 48 | 	<li><a class="dropdown-item" href="http://twitter.com/intent/tweet?text=Markdown%20to%20Bootstrap&url=https%3A%2F%2Ffxpar.github.io%2FPandoc-Lua-Markdown-Bootstrap%2F"><i class="bi bi-twitter p-3"></i> Twitter</a></li>
 49 | 	
 50 | 	<li><a class="dropdown-item" href="http://www.linkedin.com/shareArticle?mini=true&url=https%3A%2F%2Ffxpar.github.io%2FPandoc-Lua-Markdown-Bootstrap%2F&title=Markdown%20to%20Bootstrap"><i class="bi bi-linkedin p-3"></i> LinkedIn</a></li>
 51 | 	
 52 | 	<li><a class="dropdown-item" href="https://wa.me/?text=Markdown%20to%20Bootstrap%20https%3A%2F%2Ffxpar.github.io%2FPandoc-Lua-Markdown-Bootstrap%2F"><i class="bi bi-whatsapp p-3"></i> Whatsapp</a></li>
 53 | 	
 54 | 	<li><a class="dropdown-item" href="https://telegram.me/share/url?url=https%3A%2F%2Ffxpar.github.io%2FPandoc-Lua-Markdown-Bootstrap%2F&text=Markdown%20to%20Bootstrap"><i class="bi bi-telegram p-3"></i> Telegram</a></li>
 55 | 	
 56 | 	<li><a class="dropdown-item" href="mailto:?subject=Super%2
 57 | 	0link&body=https%3A%2F%2Ffxpar.github.io%2FPandoc-Lua-Markdown-Bootstrap%2F%0D%0AMarkdown%20to%20Bootstrap"><i class="bi bi-envelope p-3"></i> Mail</a></li>
 58 | 	
 59 | 
 60 | 	
 61 | 		 </ul>
 62 |   </div>
 63 | 	
 64 | 	</div>
 65 | 		
 66 | 
 67 | </nav>
 68 | 
 69 | <div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel" >
 70 |   <div class="offcanvas-header">
 71 |     <h5 class="offcanvas-title" id="offcanvasExampleLabel"> Markdown to
 72 | Bootstrap   </h5>
 73 |     <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
 74 |   </div>
 75 |   <div class="offcanvas-body">
 76 | 
 77 | 	<ul class="list-unstyled ps-0">
 78 |         <li class="border-top my-3"></li>
 79 | 				<li class="mb-1">
 80 | 			<button class="btn btn-toggle align-items-center rounded" data-bs-toggle="collapse" data-bs-target="#nav-content" aria-expanded="true">Content</button>
 81 | 			<div id="nav-content" class="collapse show" >
 82 | 				<ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small"  data-bs-dismiss="offcanvas">
 83 | 		 
 84 |           <!-- test 2-->
 85 | <li class="mb-1"><a class="link-dark rounded" href="#title1">JUMBOTRON</a></li><li class="mb-1"><a class="link-dark rounded" href="#title2">JUMBOTRON COLORED</a></li><li class="mb-1"><a class="link-dark rounded" href="#title3">ALERTS</a></li><li class="mb-1"><a class="link-dark rounded" href="#title4">CARD</a></li><li class="mb-1"><a class="link-dark rounded" href="#title5">ACCORDION</a></li><li class="mb-1"><a class="link-dark rounded" href="#title6">CAROUSEL</a></li><li class="mb-1"><a class="link-dark rounded" href="#title7">TABS</a></li><li class="mb-1"><a class="link-dark rounded" href="#title8">BUTTONS</a></li><li class="mb-1"><a class="link-dark rounded" href="#title9">EMBEDS</a></li><li class="mb-1"><a class="link-dark rounded" href="#title11">Icons</a></li><li class="mb-1"><a class="link-dark rounded" href="#title12">normal chapter</a></li>   
 86 | 		  
 87 | 		</ul>
 88 | 			</div>
 89 | 		</li>
 90 | 		<li class="border-top my-3"></li>
 91 | 		
 92 | 		  		  
 93 | 		 <li class="mb-1">
 94 | 			<button class="btn btn-toggle align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#presentation-collapse" aria-expanded="true">Learn More</button>
 95 | 			<div id="presentation-collapse" class="collapse show" >
 96 | 				<ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small" data-bs-dismiss="offcanvas">
 97 | 					<li><a class="nav-link link-dark rounded" href="https://getbootstrap.com"><i class="bi-bootstrap me-2"></i> Bootstrap</a></li>
 98 | 					<li><a class="nav-link link-dark rounded" href="https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax"><i class="bi-github me-2"></i>Markdown</a></li>
 99 | 					<li><a class="nav-link link-dark rounded" href="https://pandoc.org/"><i class="bi-globe me-2"></i>Pandoc</a></li>
100 | 					<li><a class="nav-link link-dark rounded" href="https://pandoc.org/lua-filters.html"><i class="bi-globe me-2"></i>Lua Filters</a></li>
101 | 					
102 | 
103 | 				</ul>
104 | 			</div>
105 | 		</li>
106 | 		<li class="border-top my-3"></li>
107 | 		<li><a class="nav-link link-dark rounded" href="https://www.linkedin.com/in/francois-parlant/"><i class="bi-linkedin me-2"></i>François Parlant</a></li>
108 | 	</ul>
109 |    
110 | 		  </div>
111 | 		</div>
112 | 		 <h1 class="title">Markdown to Bootstrap</h1>
113 | 		 
114 | 	   
115 | 		 
116 |       <h1 class="display-2" id="title1">JUMBOTRON</h1>
117 |       <section class="p-2 p-md-5 rounded-lg mt-3 jumbotron ">
118 |       <h1 class="display-4" id="learn-markdown">Learn Markdown</h1>
119 |       <p class="lead">Lead text for this header block</p>
120 |       <hr class="my-4"/>
121 |       <p>Description part for this jumbotron</p>
122 |       </section>
123 |       <h1 class="display-2" id="title2">JUMBOTRON COLORED</h1>
124 |       <section class="p-2 p-md-5 rounded-lg mt-3 jumbotron bg-success text-white ">
125 |       <h1 class="display-4" id="learn-boostrap">Learn Boostrap</h1>
126 |       <p class="lead">Lead text for this header block</p>
127 |       <hr class="my-4"/>
128 |       <p>Description part for this jumbotron</p>
129 |       </section>
130 |       <h1 class="display-2" id="title3">ALERTS</h1>
131 |       <div class="alert alert-danger">
132 |       <p>You must do this to be safe</p>
133 |       </div>
134 |       <div class="alert alert-info">
135 |       <p>This is an information</p>
136 |       </div>
137 |       <div class="alert alert-warning">
138 |       <p><span class="bi bi-bug"></span> This is an information</p>
139 |       </div>
140 |       <h1 class="display-2" id="title4">CARD</h1>
141 |       <div class="card">
142 |       <div class="card-header">
143 |       <p>text of the header</p>
144 |       </div>
145 |       <h1 class="specialHeader" id="a-title-in-the-body">a title in the
146 |       body</h1>
147 |       <p>Paragraph one of the body Paragraph two of the body</p>
148 |       <div class="card-footer">
149 |       <p>text of the footer</p>
150 |       </div>
151 |       </div>
152 |       <h1 class="display-2" id="title5">ACCORDION</h1>
153 |       <div class="accordion" id="accordionExample">
154 |       	
155 |         <div class="accordion-item">
156 |           <h2 class="accordion-header" id="heading1">
157 |             <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse1" aria-expanded="true" aria-controls="collapse1">
158 |               Accordion Item #1      </button>
159 |           </h2>
160 |           <div id="collapse1" class="accordion-collapse collapse show" aria-labelledby="heading1" data-bs-parent="#accordionExample">
161 |             <div class="accordion-body">
162 |       	
163 |       		
164 |       Accordion
165 | 
166 |       Item
167 | 
168 |       #1
169 | 
170 |       <p>First toggle content</p>
171 |       </div></div></div>	
172 |         <div class="accordion-item">
173 |           <h2 class="accordion-header" id="heading2">
174 |             <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse2" aria-expanded="true" aria-controls="collapse2">
175 |               Accordion Item #2      </button>
176 |           </h2>
177 |           <div id="collapse2" class="accordion-collapse collapse " aria-labelledby="heading2" data-bs-parent="#accordionExample">
178 |             <div class="accordion-body">
179 |       	
180 |       		
181 |       Accordion
182 | 
183 |       Item
184 | 
185 |       #2
186 | 
187 |       <p>Second toggle content</p>
188 |       </div></div></div>	
189 |         <div class="accordion-item">
190 |           <h2 class="accordion-header" id="heading3">
191 |             <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse3" aria-expanded="true" aria-controls="collapse3">
192 |               Accordion Item #3      </button>
193 |           </h2>
194 |           <div id="collapse3" class="accordion-collapse collapse " aria-labelledby="heading3" data-bs-parent="#accordionExample">
195 |             <div class="accordion-body">
196 |       	
197 |       		
198 |       Accordion
199 | 
200 |       Item
201 | 
202 |       #3
203 | 
204 |       <p>Third toggle content</p>
205 |       </div></div></div></div>
206 |       <h1 class="display-2" id="title6">CAROUSEL</h1>
207 |       <div id="carousel1" class="carousel slide" data-bs-ride="carousel">
208 |       <div class="carousel-inner">
209 |       			<div class="carousel-item active"><h2>
210 |       		
211 |       First
212 | 
213 |       slide
214 | 
215 |       label
216 |       </h2>
217 |       <p>Some representative placeholder content for the first
218 |       slide.</p>
219 |       </div>			<div class="carousel-item "><h2>
220 |       		
221 |       Second
222 | 
223 |       slide
224 | 
225 |       label
226 |       </h2>
227 |       <p>Some representative placeholder content for the second
228 |       slide.</p>
229 |       </div>			<div class="carousel-item "><h2>
230 |       		
231 |       Third
232 | 
233 |       slide
234 | 
235 |       label
236 |       </h2>
237 |       <p>Some representative placeholder content for the third
238 |       slide.</p>
239 |           </div>
240 |       		  </div>
241 |       		  <button class="carousel-control-prev" type="button" data-bs-target="#carousel1" data-bs-slide="prev">
242 |       			<span class="carousel-control-prev-icon" aria-hidden="true"></span>
243 |       			<span class="visually-hidden">Previous</span>
244 |       		  </button>
245 |       		  <button class="carousel-control-next" type="button" data-bs-target="#carousel1" data-bs-slide="next">
246 |       			<span class="carousel-control-next-icon" aria-hidden="true"></span>
247 |       			<span class="visually-hidden">Next</span>
248 |       		  </button>
249 |       		</div>
250 |       <h1 class="display-2" id="title7">TABS</h1>
251 |       <div class="card-header"><ul class="nav nav-pills card-header-pills" style="list-style-type: none;"><li class="nav-item"><a class="nav-link show active" data-bs-toggle="tab" href="#menu1">Linux</a></li><li class="nav-item"><a class="nav-link " data-bs-toggle="tab" href="#menu2">Mac</a></li><li class="nav-item"><a class="nav-link " data-bs-toggle="tab" href="#menu3">Windows</a></li></ul></div><div class="tab-content border-left border-right border-bottom ">
252 |       </ul></div> 
253 | 
254 |       <div class="tab-content border-left border-right border-bottom ">
255 |       	<div id="menu1" class="tab-pane fade in active show border p-3"><h1>
256 |       Linux
257 |       </h1>
258 |       <h2 id="support-for-linux-users">Support for Linux users</h2>
259 |       <p>Create a shell script</p>
260 |       </div><div id="menu2" class="tab-pane fade in border p-3"><h1>
261 |       Mac
262 |       </h1>
263 |       <h2 id="support-for-mac-users">Support for Mac users</h2>
264 |       <p>Do it with Cmd.</p>
265 |       </div><div id="menu3" class="tab-pane fade in border p-3"><h1>
266 |       Windows
267 |       </h1>
268 |       <h2 id="support-for-windows-users">Support for windows users</h2>
269 |       <p>Do it with Ctrl</p>
270 |       </div></div>
271 |       <section id="special-chapter" class="specialHeader quiz">
272 |       <h1 class="specialHeader">special chapter</h1>
273 |       <ul >
274 |       <li class="special-item">at the start</li>
275 |       <li class="special-item">something else</li>
276 |       <li class="special-item">the end</li>
277 |       </ul>
278 | 
279 |       </section>
280 |       <div class="quiz carousel">
281 |       <h1 class="specialHeader" id="most-frequent-questions">2 most
282 |       frequent questions</h1>
283 |       <p>Earn points for the exam</p>
284 |       <h1 class="specialHeader"
285 |       id="which-bootstrap-component-can-be-swyped">Which bootstrap
286 |       component can be swyped?</h1>
287 |       <ul >
288 |       <li class="special-item">Carousel</li>
289 |       <li class="special-item">Accordion</li>
290 |       <li class="special-item">Alert</li>
291 |       <li class="special-item">Carddeck</li>
292 |       </ul>
293 | 
294 |       <h1 class="specialHeader"
295 |       id="which-language-takes-indentation-very-seriously">Which
296 |       language takes indentation very seriously?</h1>
297 |       <ul >
298 |       <li class="special-item">javascript</li>
299 |       <li class="special-item">Php</li>
300 |       <li class="special-item">Python</li>
301 |       </ul>
302 | 
303 |       </div>
304 |       <h1 class="display-2" id="title8">BUTTONS</h1>
305 |       <p><a href="https://github.com/pandoc"
306 |       class="btn btn-primary">Pandoc repository</a></p>
307 |       <p><a href="https://github.com/pandoc"
308 |       class="btn btn-success">Pandoc repository</a></p>
309 |       <h1 class="display-2" id="title9">EMBEDS</h1>
310 |       <p>		
311 |       		<div class="ratio ratio-16x9">
312 |       				<iframe  src="https://www.youtube.com/embed/Uz7XbIxHf-4?rel=0" allowfullscreen></iframe>
313 |       		</div>
314 |       					
315 |       			
316 |       	</p>
317 |       <p>		
318 |       		<div class="ratio ratio-16x9">
319 |       				<iframe  src="https://www.youtube.com/embed/JdeyVMi2W8U?rel=0" allowfullscreen></iframe>
320 |       		</div>
321 |       				<div class="btn-group pull-end" role="group">
322 |       			<button id="btnGroupDrop11" type="button" class="btn btn-Light dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
323 |       			  Share
324 |       			</button>
325 |       			<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="btnGroupDrop11">	
326 |       	
327 |       	<li><a class="dropdown-item" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DJdeyVMi2W8U"><i class="bi bi-facebook p-3"></i> Facebook</a></li>
328 |       	
329 |       	
330 |       	<li><a class="dropdown-item" href="http://twitter.com/intent/tweet?text=Youtube%20video%20with%20sharing%20links&url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DJdeyVMi2W8U"><i class="bi bi-twitter p-3"></i> Twitter</a></li>
331 |       	
332 |       	<li><a class="dropdown-item" href="http://www.linkedin.com/shareArticle?mini=true&url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DJdeyVMi2W8U&title=Youtube%20video%20with%20sharing%20links"><i class="bi bi-linkedin p-3"></i> LinkedIn</a></li>
333 |       	
334 |       	<li><a class="dropdown-item" href="https://wa.me/?text=Youtube%20video%20with%20sharing%20links%20https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DJdeyVMi2W8U"><i class="bi bi-whatsapp p-3"></i> Whatsapp</a></li>
335 |       	
336 |       	<li><a class="dropdown-item" href="https://telegram.me/share/url?url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DJdeyVMi2W8U&text=Youtube%20video%20with%20sharing%20links"><i class="bi bi-telegram p-3"></i> Telegram</a></li>
337 |       	
338 |       	<li><a class="dropdown-item" href="mailto:?subject=Super%2
339 |       	0link&body=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DJdeyVMi2W8U%0D%0AYoutube%20video%20with%20sharing%20links"><i class="bi bi-envelope p-3"></i> Mail</a></li>
340 |       	
341 | 
342 |       				</ul>
343 |       		</div>
344 |       					
345 |       			
346 |       	</p>
347 |       <h1 class="display-2" id="title11">Icons</h1>
348 |       <p>I love <span class="bi bi-bootstrap"></span> with markdown.</p>
349 |       <h1 class="display-2" id="title12">normal chapter</h1>
350 |       <ul >
351 |       <li class="list-group-item">a normal list</li>
352 |       <li class="list-group-item">with items</li>
353 |       <li class="list-group-item">or more</li>
354 |       <li class="list-group-item">to finish</li>
355 |       </ul>
356 | 	  
357 |       </div>
358 |    </body>
359 | </html>


--------------------------------------------------------------------------------