Différences

Ci-dessous, les différences entre deux révisions de la page.

--- informatique:outils:vim:convertir_en_html [2025/01/02 09:25] – supprimée - modification externe (Date inconnue) 127.0.0.1
+++ informatique:outils:vim:convertir_en_html [2025/01/02 09:25] (Version actuelle) – ↷ Page déplacée de informatique:vim:convertir_en_html à informatique:outils:vim:convertir_en_html alexis
@@ Ligne 1: / Ligne 1: @@
+====== Convertir en HTML ======
+Il est possible de convertir le contenu d'un fichier en HTML en utilisant ''TOhtml'' en mode visuel.
+Il est possible de le faire également en mode CLI de la manière suivante :
+<WRAP prewrap>
+<code bash>
+# Convertir tout le fichier
+vim -e <filename> -c "set nobackup" -c :TOhtml -c wq -c :q
+# Convertir une partie du fichier (de la ligne 10 à la ligne 20 incluse)
+vim -e <filename> -c "set nobackup" -c :10,20TOhtml -c wq -c :q
+</code>
+</WRAP>
+Avec l'utilisation du thème [[https://www.vim.org/scripts/script.php?script_id=1464|moria]], il est possible de changer la coloration syntaxique de base :
+<WRAP prewrap>
+<code bash>
+# Avec un arrière plan foncé
+vim -e <filename> -c "set nobackup" -c "let moria_style='dark'" -c ":colorscheme moria" -c :TOhtml -c wq -c :q
+# Avec un arrière plan clair
+vim -e <filename> -c "set nobackup" -c "let moria_style='light'" -c ":colorscheme moria" -c :TOhtml -c wq -c :q
+</code>
+</WRAP>
+<WRAP tip>
+Il est intéressant de pouvoir convertir le fichier HTML généré en image pour pouvoir l'inclure dans une documentation. Pour cela, il est possible d'utiliser ''wkhtmltoimage'', ''firefox'' en mode //headless// ou encore ''Puppeteer''.
+</WRAP>
+===== Exemple =====
+==== Fichier source ====
+<WRAP prewrap>
+<code python event.py>
+class Card:
+  def __init__(self, event, person):
+    self.event=event
+    self.person=person
+  def message(self):
+    print(f"Happy {self.event} {self.person}!")
+card = Card('birthday', 'Charles')
+card.message()
+</code>
+</WRAP>
+<WRAP group>
+<WRAP half column>
+==== Résultat avec le thème sombre ====
+<WRAP prewrap>
+<code html event.py.dark.html>
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8">
+<title>~/event.py.html</title>
+<meta name="Generator" content="Vim/8.2">
+<meta name="plugin-version" content="vim8.1_v2">
+<meta name="syntax" content="python">
+<meta name="settings" content="number_lines,use_css,pre_wrap,no_foldcolumn,expand_tabs,line_ids,prevent_copy=,use_input_for_pc=fallback">
+<meta name="colorscheme" content="moria">
+<style>
+<!--
+pre { white-space: pre-wrap; font-family: monospace; color: #c0c0c0; background-color: #000000; }
+body { font-family: monospace; color: #c0c0c0; background-color: #000000; }
+* { font-size: 1em; }
+.LineNr { color: #ffff00; }
+.Constant { color: #ff40ff; }
+.Identifier { color: #00ffff; font-weight: bold; }
+.Statement { color: #ffff00; }
+-->
+</style>
+<script>
+<!--
+/* function to open any folds containing a jumped-to line before jumping to it */
+function JumpToLine()
+{
+  var lineNum;
+  lineNum = window.location.hash;
+  lineNum = lineNum.substr(1); /* strip off '#' */
+  if (lineNum.indexOf('L') == -1) {
+    lineNum = 'L'+lineNum;
+  }
+  var lineElem = document.getElementById(lineNum);
+  /* Always jump to new location even if the line was hidden inside a fold, or
+   * we corrected the raw number to a line ID.
+   */
+  if (lineElem) {
+    lineElem.scrollIntoView(true);
+  }
+  return true;
+}
+if ('onhashchange' in window) {
+  window.onhashchange = JumpToLine;
+}
+-->
+</script>
+</head>
+<body onload='JumpToLine();'>
+<pre id='vimCodeElement'>
+<span id="L1" class="LineNr"> 1 </span><span class="Statement">class</span> <span class="Identifier">Card</span>:
+<span id="L2" class="LineNr"> 2 </span>  <span class="Statement">def</span> <span class="Identifier">__init__</span>(self, event, person):
+<span id="L3" class="LineNr"> 3 </span>    self.event=event
+<span id="L4" class="LineNr"> 4 </span>    self.person=person
+<span id="L5" class="LineNr"> 5 </span>
+<span id="L6" class="LineNr"> 6 </span>  <span class="Statement">def</span> <span class="Identifier">message</span>(self):
+<span id="L7" class="LineNr"> 7 </span>    <span class="Identifier">print</span>(f<span class="Constant">&quot;</span><span class="Constant">Happy {self.event} {self.person}!</span><span class="Constant">&quot;</span>)
+<span id="L8" class="LineNr"> 8 </span>
+<span id="L9" class="LineNr"> 9 </span>card = Card(<span class="Constant">'</span><span class="Constant">birthday</span><span class="Constant">'</span>, <span class="Constant">'</span><span class="Constant">Charles</span><span class="Constant">'</span>)
+<span id="L10" class="LineNr">10 </span>card.message()
+</pre>
+</body>
+</html>
+<!-- vim: set foldmethod=manual : -->
+</code>
+</WRAP>
+{{:informatique:vim:event.py.dark.jpg}}
+</WRAP>
+<WRAP half column>
+==== Résultat avec le thème clair ====
+<WRAP prewrap>
+<code html event.py.light.html>
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8">
+<title>~/event.py.html</title>
+<meta name="Generator" content="Vim/8.2">
+<meta name="plugin-version" content="vim8.1_v2">
+<meta name="syntax" content="python">
+<meta name="settings" content="number_lines,use_css,pre_wrap,no_foldcolumn,expand_tabs,line_ids,prevent_copy=,use_input_for_pc=fallback">
+<meta name="colorscheme" content="moria">
+<style>
+<!--
+pre { white-space: pre-wrap; font-family: monospace; color: #000000; background-color: #ffffff; }
+body { font-family: monospace; color: #000000; background-color: #ffffff; }
+* { font-size: 1em; }
+.LineNr { color: #af5f00; }
+.Constant { color: #c00000; }
+.Identifier { color: #008080; }
+.Statement { color: #af5f00; }
+-->
+</style>
+<script>
+<!--
+/* function to open any folds containing a jumped-to line before jumping to it */
+function JumpToLine()
+{
+  var lineNum;
+  lineNum = window.location.hash;
+  lineNum = lineNum.substr(1); /* strip off '#' */
+  if (lineNum.indexOf('L') == -1) {
+    lineNum = 'L'+lineNum;
+  }
+  var lineElem = document.getElementById(lineNum);
+  /* Always jump to new location even if the line was hidden inside a fold, or
+   * we corrected the raw number to a line ID.
+   */
+  if (lineElem) {
+    lineElem.scrollIntoView(true);
+  }
+  return true;
+}
+if ('onhashchange' in window) {
+  window.onhashchange = JumpToLine;
+}
+-->
+</script>
+</head>
+<body onload='JumpToLine();'>
+<pre id='vimCodeElement'>
+<span id="L1" class="LineNr"> 1 </span><span class="Statement">class</span> <span class="Identifier">Card</span>:
+<span id="L2" class="LineNr"> 2 </span>  <span class="Statement">def</span> <span class="Identifier">__init__</span>(self, event, person):
+<span id="L3" class="LineNr"> 3 </span>    self.event=event
+<span id="L4" class="LineNr"> 4 </span>    self.person=person
+<span id="L5" class="LineNr"> 5 </span>
+<span id="L6" class="LineNr"> 6 </span>  <span class="Statement">def</span> <span class="Identifier">message</span>(self):
+<span id="L7" class="LineNr"> 7 </span>    <span class="Identifier">print</span>(f<span class="Constant">&quot;</span><span class="Constant">Happy {self.event} {self.person}!</span><span class="Constant">&quot;</span>)
+<span id="L8" class="LineNr"> 8 </span>
+<span id="L9" class="LineNr"> 9 </span>card = Card(<span class="Constant">'</span><span class="Constant">birthday</span><span class="Constant">'</span>, <span class="Constant">'</span><span class="Constant">Charles</span><span class="Constant">'</span>)
+<span id="L10" class="LineNr">10 </span>card.message()
+</pre>
+</body>
+</html>
+<!-- vim: set foldmethod=manual : -->
+</code>
+</WRAP>
+{{:informatique:vim:event.py.light.jpg}}
+</WRAP>
+</WRAP>