Skip to content

Commit

Permalink
mise à jour du 7 mai 2023
Browse files Browse the repository at this point in the history
  • Loading branch information
@damienbelveze
damienbelveze committed May 8, 2023
1 parent 3bd08e3 commit d42095a
Show file tree
Hide file tree
Showing 5 changed files with 315 additions and 1 deletion.
36 changes: 36 additions & 0 deletions _notes/YAML.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
---
title: YAML
subtitle: A quoi sert le pavé YAML
author: Damien Belvèze
date: 21-04-2021
link_citations: true
aliases: []
---

Acronyme de Yet Another Markup Language.
Format de représentation des données :

```
---
title: évaluer l'information à l'ère des fake-news
subtitle: présentation CFCB
author: Damien Belvèze
affiliation: Université de Rennes 1
toc: true
toc-title: Plan
bibliography: references.bib
biblio-style: ieee.csl
---
```

Pandoc traite l'entête Yaml notamment pour faire la page de titre.
Cet entête peut faire partie du document ou bien lui être associé sous la forme d'un document indépendant en format .yaml

Dans ce cas, la conversion peut se faire de la manière suivante :

````
pandoc -s document1.md document2.md fichier.yaml -o book.html
````
(source : https://pandoc.org/MANUAL.html#pandocs-markdown)

[[identifiants pérennes Obsidian]] : Utiliser [[Python]] pour renommer un fichier d'après un identifiant compris dans l'entête YAML
2 changes: 1 addition & 1 deletion _notes/formation URFIST.md → _notes/formation.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -166,7 +166,7 @@ On peut utiliser pandoc et la suite LaTeX installée sur l'ordinateur pour conve

convertir une note en markdown avec des images et selon une CSS

Voir la note sur les [[markdown vers HTML|procédures-bâillons]]
Voir la note sur les [[markdown vers HTML|procédures bâillons]]

pour convertir un fichier et les images liées, la ligne de commande est la suivante :

Expand Down
1 change: 1 addition & 0 deletions _notes/markdown vers HTML.md
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
---
title: markdown vers html
date: 13 avril 2023
alias: [procédures bâillons]
---

# Les procédures bâillons
Expand Down
277 changes: 277 additions & 0 deletions _pages/gérer les images.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,277 @@
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
<head>
<meta charset="utf-8" />
<meta name="generator" content="pandoc" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
<meta name="dcterms.date" content="2023-12-04" />
<title>gérer les images</title>
<style>
html {
line-height: 1.5;
font-family: Georgia, serif;
font-size: 20px;
color: #1a1a1a;
background-color: #fdfdfd;
}
body {
margin: 0 auto;
max-width: 36em;
padding-left: 50px;
padding-right: 50px;
padding-top: 50px;
padding-bottom: 50px;
hyphens: auto;
overflow-wrap: break-word;
text-rendering: optimizeLegibility;
font-kerning: normal;
}
@media (max-width: 600px) {
body {
font-size: 0.9em;
padding: 1em;
}
h1 {
font-size: 1.8em;
}
}
@media print {
body {
background-color: transparent;
color: black;
font-size: 12pt;
}
p, h2, h3 {
orphans: 3;
widows: 3;
}
h2, h3, h4 {
page-break-after: avoid;
}
}
p {
margin: 1em 0;
}
a {
color: #1a1a1a;
}
a:visited {
color: #1a1a1a;
}
img {
max-width: 100%;
}
h1, h2, h3, h4, h5, h6 {
margin-top: 1.4em;
}
h5, h6 {
font-size: 1em;
font-style: italic;
}
h6 {
font-weight: normal;
}
ol, ul {
padding-left: 1.7em;
margin-top: 1em;
}
li > ol, li > ul {
margin-top: 0;
}
blockquote {
margin: 1em 0 1em 1.7em;
padding-left: 1em;
border-left: 2px solid #e6e6e6;
color: #606060;
}
code {
font-family: Menlo, Monaco, 'Lucida Console', Consolas, monospace;
font-size: 85%;
margin: 0;
}
pre {
margin: 1em 0;
overflow: auto;
}
pre code {
padding: 0;
overflow: visible;
overflow-wrap: normal;
}
.sourceCode {
background-color: transparent;
overflow: visible;
}
hr {
background-color: #1a1a1a;
border: none;
height: 1px;
margin: 1em 0;
}
table {
margin: 1em 0;
border-collapse: collapse;
width: 100%;
overflow-x: auto;
display: block;
font-variant-numeric: lining-nums tabular-nums;
}
table caption {
margin-bottom: 0.75em;
}
tbody {
margin-top: 0.5em;
border-top: 1px solid #1a1a1a;
border-bottom: 1px solid #1a1a1a;
}
th {
border-top: 1px solid #1a1a1a;
padding: 0.25em 0.5em 0.25em 0.5em;
}
td {
padding: 0.125em 0.5em 0.25em 0.5em;
}
header {
margin-bottom: 4em;
text-align: center;
}
#TOC li {
list-style: none;
}
#TOC ul {
padding-left: 1.3em;
}
#TOC > ul {
padding-left: 0;
}
#TOC a:not(:hover) {
text-decoration: none;
}
code{white-space: pre-wrap;}
span.smallcaps{font-variant: small-caps;}
div.columns{display: flex; gap: min(4vw, 1.5em);}
div.column{flex: auto; overflow-x: auto;}
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
ul.task-list{list-style: none;}
ul.task-list li input[type="checkbox"] {
width: 0.8em;
margin: 0 0.8em 0.2em -1.6em;
vertical-align: middle;
}
pre > code.sourceCode { white-space: pre; position: relative; }
pre > code.sourceCode > span { display: inline-block; line-height: 1.25; }
pre > code.sourceCode > span:empty { height: 1.2em; }
.sourceCode { overflow: visible; }
code.sourceCode > span { color: inherit; text-decoration: inherit; }
div.sourceCode { margin: 1em 0; }
pre.sourceCode { margin: 0; }
@media screen {
div.sourceCode { overflow: auto; }
}
@media print {
pre > code.sourceCode { white-space: pre-wrap; }
pre > code.sourceCode > span { text-indent: -5em; padding-left: 5em; }
}
pre.numberSource code
{ counter-reset: source-line 0; }
pre.numberSource code > span
{ position: relative; left: -4em; counter-increment: source-line; }
pre.numberSource code > span > a:first-child::before
{ content: counter(source-line);
position: relative; left: -1em; text-align: right; vertical-align: baseline;
border: none; display: inline-block;
-webkit-touch-callout: none; -webkit-user-select: none;
-khtml-user-select: none; -moz-user-select: none;
-ms-user-select: none; user-select: none;
padding: 0 4px; width: 4em;
color: #aaaaaa;
}
pre.numberSource { margin-left: 3em; border-left: 1px solid #aaaaaa; padding-left: 4px; }
div.sourceCode
{ }
@media screen {
pre > code.sourceCode > span > a:first-child::before { text-decoration: underline; }
}
code span.al { color: #ff0000; font-weight: bold; } /* Alert */
code span.an { color: #60a0b0; font-weight: bold; font-style: italic; } /* Annotation */
code span.at { color: #7d9029; } /* Attribute */
code span.bn { color: #40a070; } /* BaseN */
code span.bu { color: #008000; } /* BuiltIn */
code span.cf { color: #007020; font-weight: bold; } /* ControlFlow */
code span.ch { color: #4070a0; } /* Char */
code span.cn { color: #880000; } /* Constant */
code span.co { color: #60a0b0; font-style: italic; } /* Comment */
code span.cv { color: #60a0b0; font-weight: bold; font-style: italic; } /* CommentVar */
code span.do { color: #ba2121; font-style: italic; } /* Documentation */
code span.dt { color: #902000; } /* DataType */
code span.dv { color: #40a070; } /* DecVal */
code span.er { color: #ff0000; font-weight: bold; } /* Error */
code span.ex { } /* Extension */
code span.fl { color: #40a070; } /* Float */
code span.fu { color: #06287e; } /* Function */
code span.im { color: #008000; font-weight: bold; } /* Import */
code span.in { color: #60a0b0; font-weight: bold; font-style: italic; } /* Information */
code span.kw { color: #007020; font-weight: bold; } /* Keyword */
code span.op { color: #666666; } /* Operator */
code span.ot { color: #007020; } /* Other */
code span.pp { color: #bc7a00; } /* Preprocessor */
code span.sc { color: #4070a0; } /* SpecialChar */
code span.ss { color: #bb6688; } /* SpecialString */
code span.st { color: #4070a0; } /* String */
code span.va { color: #19177c; } /* Variable */
code span.vs { color: #4070a0; } /* VerbatimString */
code span.wa { color: #60a0b0; font-weight: bold; font-style: italic; } /* Warning */
.display.math{display: block; text-align: center; margin: 0.5rem auto;}
</style>
<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv-printshiv.min.js"></script>
<![endif]-->
</head>
<body>
<header id="title-block-header">
<h1 class="title">gérer les images</h1>
<p class="date">12/04/2023</p>
</header>
<p align="left">
<img src="images/390px_Fariba.jpg">
</p>
<p>centrer cette image et en réduire la largeur en ajoutant un peu de
balisage html :</p>
<p><code>![Fariba Adelkhak](images/390px_Fariba.jpg){width=200px}</code></p>
<p align="left">
<img width="200" src="images/390px_Fariba.jpg">
</p>
<p>Pour déplacer l’image au centre, il faut recourir au html :</p>
<div class="sourceCode" id="cb1"><pre
class="sourceCode html"><code class="sourceCode html"><span id="cb1-1"><a href="#cb1-1" aria-hidden="true" tabindex="-1"></a><span class="kw">&lt;p</span> <span class="er">align</span><span class="ot">=</span><span class="st">&quot;center&quot;</span><span class="kw">&gt;</span></span>
<span id="cb1-2"><a href="#cb1-2" aria-hidden="true" tabindex="-1"></a> <span class="kw">&lt;img</span> <span class="er">alt</span><span class="ot">=</span><span class="st">&quot;Fariba Adelkhak&quot;</span> <span class="er">width</span><span class="ot">=</span><span class="st">&quot;200&quot;</span> <span class="er">src</span><span class="ot">=</span><span class="st">&quot;assets/390px_fariba.jpg&quot;</span><span class="kw">&gt;</span></span>
<span id="cb1-3"><a href="#cb1-3" aria-hidden="true" tabindex="-1"></a><span class="kw">&lt;/p&gt;</span></span></code></pre></div>
<p align="center">
<img src="images/390px_fariba.jpg" width="200">
</p>
<p>et pour avoir la légende :</p>
<div class="sourceCode" id="cb2"><pre
class="sourceCode html"><code class="sourceCode html"><span id="cb2-1"><a href="#cb2-1" aria-hidden="true" tabindex="-1"></a><span class="kw">&lt;figure&gt;</span></span>
<span id="cb2-2"><a href="#cb2-2" aria-hidden="true" tabindex="-1"></a> <span class="kw">&lt;p</span> <span class="er">align</span><span class="ot">=</span><span class="st">&quot;center&quot;</span><span class="kw">&gt;</span></span>
<span id="cb2-3"><a href="#cb2-3" aria-hidden="true" tabindex="-1"></a> <span class="kw">&lt;img</span> <span class="er">alt</span><span class="ot">=</span><span class="st">&quot;Fariba Adelkhak&quot;</span> <span class="er">width</span><span class="ot">=</span><span class="st">&quot;200&quot;</span> <span class="er">src</span><span class="ot">=</span><span class="st">&quot;assets/390px_fariba.jpg&quot;</span><span class="kw">&gt;</span></span>
<span id="cb2-4"><a href="#cb2-4" aria-hidden="true" tabindex="-1"></a> <span class="kw">&lt;figcaption&gt;</span>Fariba Adelkhak <span class="kw">&lt;/figcaption&gt;</span></span>
<span id="cb2-5"><a href="#cb2-5" aria-hidden="true" tabindex="-1"></a> <span class="kw">&lt;/p&gt;</span></span>
<span id="cb2-6"><a href="#cb2-6" aria-hidden="true" tabindex="-1"></a><span class="kw">&lt;/figure&gt;</span></span></code></pre></div>
<figure>
<p align="center">
<img alt="Fariba Adelkhak" width="200" src="images/390px_fariba.jpg">
<figcaption>
Fariba Adelkhak
</figcaption>
</p>
</figure>
<p>Ce dernier point montre que :</p>
<ul>
<li>le markdown ne peut pas prendre en charge toute l’apparence du texte
: il faut y ajouter du balisage HTML et ou des feuilles de style
(CSS)</li>
<li>le markdown peut intégrer plusieurs langages pour la mise en page ou
l’édition, les plus utilisés sont le HTML, le CSS et le LaTeX.</li>
</ul>
</body>
</html>
Binary file added markdown vers PDF.pdf
View file
Binary file not shown.

0 comments on commit d42095a

Please sign in to comment.