4
votes

CSS en ligne avec Pandoc

Je m'excuse si un moyen simple d'y parvenir par programmation (pas en copiant / collant dans un champ de navigateur et en cliquant sur un bouton pour convertir) est documenté quelque part. Dans mes recherches et mes lectures, je ne le trouve pas.

Je voudrais transformer par programme un fichier Markdown et CSS en ce qui ressemble à ce que l'on pourrait appeler CSS "en ligne". Par exemple:

Ce fichier Markdown ( file.md)

<h1 style="font-size: 100px;"><a id="install"></a>Install</h1>

Ce fichier CSS ( style.css )

    <!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" />
      <title>file</title>
      <style type="text/css">
          code{white-space: pre-wrap;}
          span.smallcaps{font-variant: small-caps;}
          span.underline{text-decoration: underline;}
          div.column{display: inline-block; vertical-align: top; width: 50%;}
      </style>
      <style type="text/css">h1 {font-size: 100px;}h2 {color: red;}</style>
      <!--[if lt IE 9]>
        <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv-printshiv.min.js"></script>
      <![endif]-->
    </head>
    <body>
      <h1><a id="install"></a>Install</h1>
      <p>Install instructions</p>
      <h2><a id="update"><a>Update</h2>
      <p>Update instructions</p>
    </body>
    </html>

html css markdown scripting pandoc

3 commentaires

Votre CMS supprime-t-il également les balises (donc ce n'est plus vraiment un fichier css au sens strict). La sortie est créée comme ceci:

pandoc -f markdown -t html file.md -o file.html -H style.css -s

0 commentaires

0
votes

Une autre solution que j'ai rencontrée après avoir posé cette question est le package Juice npm qui fournit également une CLI.

Il offre la possibilité de placer du CSS en ligne, en utilisant une feuille de style, avec un script comme celui-ci:

jus --css style.css original.html final.html

0 commentaires