Démo des plugins de type content/html

Table des matières

1. Fichier de tests du plugin attributes

see the attributes.md source code

1.1. Exemples

1.1.1. CSS inline

Ce texte est aligné à droite et a un cadre vert.

1.1.2. Animate.css

Le plugin animate permettant l’ajout de la librairie animate.css, le plugin attributes peut en tirer profit en supportant les classes CSS ajoutées comme p.ex. :

Cette phrase est animée.

Cliquez ici et téléchargez cette présentation.

1.1.2.1. Bootstrap

Texte indiquant que l’opération est réussie.

Ceci est un texte d’information.

Attention, n’avez-vous point oublié de ...

1.2. Syntaxe

Cliquez sur le lien “see the attributes.md source code” pour voir les exemples de cette page.

La règle est :

  1. faites suivre votre contenu d’un texte entre accolades, cela obligatoirement en fin de ligne et
  2. à l’intérieur des accolades, précisez vos attributs HTML; comme vous le feriez en HTML pur.

Vous pouvez ajouter un CSS inline, des classes, des attributs data-xxx, title, ..., il n’y a pas de limitation.

1.2.1. Quelques exemples :

##### Bootstrap{style='color:red;font-style:italic;'}

Ceci est un texte d'information.{class='bg-primary'} 

![](image.png){width='800px' height='32px'} 

[Téléchargez](file.pdf){class='animated infinite flash'} 

1.3. Paramétrage

Afin de permettre un paramétrage selon vos désirs, il est possible de préciser quels sont les éléments HTML pour lequel le plugin attributes peut être activés. La gestion de ces éléments se fait dans le fichier settings.json au niveau de la clef plugins.options.content.html.attributes.dom_elements.

Les tags qui y sont repris sont ceux pour lesquels le plugin sera actif.

{
    "plugins": {
        "options": {
            "content": {
                "html": {               
                    "attributes": {
                        "dom_elements": "a, code, div, h1, h2, h3, h4, h5, h6, img, p, span"
                        }
                }
            }
        }
    }
}

1.4. Librairie

Le plugin attributes permet d’utiliser toutes les librairies chargées comme, p.ex. Bootstrap ou animate.css

2. Fichier de tests du plugin content HTML – Balloon

see the balloon.md source code

2.1. Exemple

Ce plugin de type content html va remplacer les attributs title="un texte" qui se trouve dans le HTML de la note pour utiliser [balloon] qui est une librairie css permettant d’afficher les informations avec un rendu plus sympathique.

Ce plugin est le parfait compagnon du plugin abbreviation puisque c’est justement ce dernier qui injecte des abbréviations sous la forme de tooltip.

2.2. En images

Ci-dessous, ce à quoi ressemble, par défaut et sous Chrome, une bulle d’aide. Le rendu est celui du navigateur.

La bulle d’aide s’affiche sans trop de mise en forme et peut être fort longue; tellement longue qu’elle peut sortir de l’écran.

Plugin balloon non actif

Ci-dessous la même bulle d’aide mais avec le plugin Balloon actif.

C’est tout de suite nettement plus agréable.

Plugin balloon activé

2.3. Paramétrage

{
    "plugins": {
        "options": {
            "content": {
                "html": {
                    "balloon": {
                        "attributes": "data-balloon-length=\"xlarge\" style=\"    text-decoration:underline dotted;\" data-balloon-pos=\"up\""
                    }
                }
            }
        }
    }
}

2.4. Librairie

Balloon est un plugin implémentant la librairie Balloon.css de Claudio Holanda

3. Fichier de tests du plugin content HTML – Bootstrap

see the bootstrap.md source code

Ce plugin de type content html va ajouter des fonctionnalités Bootstrap aux éléments qui composent le code HTML de la note.

Les fonctionnalités sont définies dans les paramètres du plugin.

3.1. Exemple

Le tableau ci-dessous possède une barre de défilement horizontale tant depuis l’interface qu’en version HTML

column column column column column column column column column column column column column column column
Lorem ipsum dolor sit amet, consectetur adipiscing elit, Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum Lorem ipsum dolor sit amet, consectetur adipiscing elit, Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum Lorem ipsum dolor sit amet, consectetur adipiscing elit, Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum Lorem ipsum dolor sit amet, consectetur adipiscing elit, Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum Lorem ipsum dolor sit amet, consectetur adipiscing elit, Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum

3.2. Paramétrage

{
    "plugins": {
        "options": {
            "content": {
                "html": {
                    "bootstrap": {
                        "tables": {
                            "extra-classes": "table table-striped table-bordered table-hover",
                            "responsive": 1
                        }
                    }
                }
            }
        }
    }
}

3.3. Librairie

Bootstrap est un plugin implémentant la librairie bootstrap

4. Fichier de tests du plugin DataTables

see the datatables.md source code

Ce plugin ne requiert aucun tag et traite les tableaux html pour ajouter plusieurs fonctionnalités dont les filtres, recherche, tri des colonnes, pagination, ... ainsi qu’un bouton “Copier” pour copier les données (pas le code html) du tableau dans le presse-papier.

4.1. Exemple

id first_name last_name gender ip_address
1 Zane Bolver Male 127.131.174.179
2 Ichabod Ludl Male 18.223.241.62
3 Johna Buttrum Female 201.6.27.156
4 Currie Eagling Male 63.149.192.64
5 Jabez Cove Male 171.126.188.211
6 Fredelia Bridal Female 154.119.122.36
7 Zena Gimeno Female 175.161.65.81
8 Dominga Sparkes Female 92.161.241.16
9 Paulie Tofanini Female 145.236.29.130
10 Antoni Darycott Male 35.26.243.128
11 Amalea Gostick Female 234.127.26.144
12 Sandi Twist Female 229.133.154.243
13 Wright Mabley Male 90.52.248.151
14 Fredia Kipling Female 222.139.22.2
15 Lennie McCrackem Male 241.117.155.138
16 Julita Kumaar Female 112.233.255.109
17 Ethe Rate Male 225.122.75.144
18 Goober Alliberton Male 117.21.243.88
19 De Tomasutti Female 167.248.151.64
20 Maurie Hentzer Male 216.201.185.76
21 Rosana Laverenz Female 80.59.200.28
22 Theo Cacacie Male 22.81.245.100
23 Ludovico Lent Male 79.217.109.170
24 Clotilda Petyanin Female 116.18.103.194
25 Grannie Seller Male 36.103.135.51
26 Audrey Dodding Female 239.222.203.200
27 Andra Lukock Female 143.57.172.33
28 Joyce McReath Female 79.5.108.195
29 Bobbe Joye Female 38.30.177.214
30 Tonnie Moiser Male 81.8.75.91
31 Harmonia Jewise Female 26.235.64.247
32 Franciska Dunning Female 159.112.129.19
33 Zerk Swinden Male 111.32.58.89
34 Art Couttes Male 119.33.3.57
35 Rees Riddoch Male 151.142.95.71
36 Shirlee Beckers Female 211.114.39.190
37 Fredelia Kolin Female 128.166.50.61
38 Lari Tolley Female 118.194.77.96
39 Shanan Lyfe Male 160.74.99.68
40 Herby Rodway Male 127.229.31.0
41 Boyce Botten Male 146.104.188.108
42 Valentina Plummer Female 140.118.119.0
43 Gerald Hardington Male 255.137.82.8
44 Andonis Tringham Male 83.178.0.159
45 Frederich Gres Male 17.104.24.15
46 Terencio Dufer Male 152.86.161.76
47 Standford Lemmon Male 135.105.60.108
48 Issi Skey Female 47.142.168.145
49 Nonah Kitchenman Female 65.76.83.124
50 Flinn Henke Male 106.154.186.165
51 Laurent Doberer Male 238.222.122.158
52 Alden Brisseau Male 232.151.107.131
53 Ebba Studman Female 77.76.0.123
54 Farlie Bigley Male 155.221.110.201
55 Eydie Masser Female 109.85.57.58
56 Ferris Hutt Male 157.162.221.164
57 Gar Goodbanne Male 178.8.210.96
58 Adrienne Burnage Female 155.19.8.223
59 Ludvig Rylstone Male 242.8.223.60
60 Tobie Waumsley Male 103.248.28.121
61 Quintus Hugland Male 85.59.223.124
62 Gibby Treppas Male 143.236.81.227
63 Leonie Flipek Female 119.114.116.213
64 Xever Brady Male 150.8.102.84
65 Cyndi Morrissey Female 97.108.9.241
66 Sloan Rein Male 175.246.233.172
67 Benni Arkle Female 141.216.252.251
68 Leanna Hinckley Female 12.10.58.239
69 Donn Itchingham Male 95.151.29.126
70 Thadeus Yepiskopov Male 202.38.243.141
71 Urban Laboune Male 18.193.115.30
72 Isaiah Gianullo Male 125.198.3.239
73 Trev Vakhonin Male 65.27.130.42
74 Wilmar Hackworthy Male 34.149.17.157
75 Nessy MacGeffen Female 93.245.154.228
76 Danny Paumier Female 23.8.26.234
77 Vance Challice Male 156.74.159.142
78 Hannis De Benedictis Female 184.145.218.186
79 Melitta Knightsbridge Female 225.164.92.72
80 Diann Skilton Female 42.66.95.108
81 Jay Almond Male 130.96.129.83
82 Bruno Braven Male 191.233.172.2
83 Dot Bleakman Female 17.240.228.85
84 Sarene Colling Female 227.247.20.141
85 Portia Gateshill Female 87.187.218.207
86 Barry Hentzeler Male 237.109.211.97
87 Karil Fenemore Female 89.229.83.121
88 Pepi Butchard Female 9.140.163.145
89 Harlan Yukhin Male 121.164.36.82
90 Joni Frears Female 204.113.43.174
91 Dorolisa Claussen Female 76.220.118.66
92 Sayres Minor Male 169.105.131.96
93 Tanner Danford Male 56.174.36.253
94 Marshall Tute Male 133.12.103.214
95 Yelena Byllam Female 171.122.181.181
96 Emogene Girauld Female 190.211.56.78
97 Ilyssa Cobbald Female 97.252.240.93
98 Mikkel Demageard Male 229.52.224.42
99 Georgette Cheavin Female 247.154.125.253
100 Byrom Phelipeaux Male 175.88.162.63

4.2. Activation

{
    "plugins": {
        "content": {
            "html": {
                "datatables": {
                    "enabled": 0
                }
            }
        }
    }
}

4.3. Librairie

Datatables est un plugin implémentant l’addon jQuery DataTables de Allan Jardine

5. Fichier de tests du plugin font-awesome

see the font-awesome.md source code

Ce plugin va permettre de changer l’affichage des listes à puces afin d’inclure une puce font-awesome. Ce plugin va également, comme pour les emojis , remplacer les appels à : fa-bath: (*sans l’espace après le premier :) par une image provenant de font-awesome.

5.1. Exemple

Pour installer Marknotes, il convient de :

5.2. Paramétrage

Voici un exemple de pararmétrage du plugin font-awesome; utilisé pour cette note et permettant d’avoir une puce dont le visuel est le logo de Joomla, avec utilisation de la couleur Joomla et un effet de rotation.

{
    "plugins": {
        "options": {
            "page": {
                "font-awesome": {
                    "bullet": "fa-joomla fa-spin",
                    "extra_attribute": "style='color:#1a3b6b;'"
                }
            }
        }
    }
}

5.3. Librairie

Datatables est un plugin implémentant la librairie CSS Font-Awesome

6. Fichier de tests du plugin format

see the format.md source code

Le langage markdown permet de mettre en italique en ajoutant un astérique devant et après un mot comme par exemple ce texte est en italique ou de mettre en gras si on met deux astériques (cette partie est en gras).

Le plugin format va vous permettre d’ajouter vos propres règles comme par exemple le double signe égal, le double tilde, le double signe +, etc. Seule votre imagination vous bridera.

Par défaut, marknotes propose le double égal pour mettre une partie de phrase en évidence (utilisation du tag HTML <mark>), le double tilde pour barrer une partie de phrase (utilisation du tag HTML <del>)

6.1. Exemples

6.2. Paramétrage

L’ajout de vos propres préfixes se fait dans le fichier settings.json au niveau de la clef plugins.options.content.html.format.prefix.

Il faut définir le pattern à chercher càd le marqueur qui va se retrouver devant et après le mot / la partie de phrase et le value c’est-à-dire ce par quoi le marqueur doit être remplacé.

Vous pouvez utiliser un tag HTML mais aussi une construction un peu plus complexe comme l’exemple du double signe égal ci-dessous (le résultat donne une animation infinie où le mot apparaît, disparaît, apparaît, ... (support de animate.css requis)).

"plugins": {
    "options": {
        "content": {
            "html": {
                "format": {
                    "prefix": [
                        {
                            "pattern": "==",
                            "value": "<mark class='animated infinite flash'>$1</mark>"
                        },
                        {
                            "pattern": "~~",
                            "value": "<del>$1</del>"
                        },
                        {
                            "pattern": "++",
                            "value": "<ins>$1</ins>"
                        },
                        {
                            "pattern": "##",
                            "value": "<kbd>$1</kbd>"
                        },
                        {
                            "pattern": "^^",
                            "value": "<sup>$1</sup>"
                        },
                        {
                            "pattern": "§",
                            "value": "<sub>$1</sub>"
                        }
                    ]
                }
            }
        }
    }
}

see the image_gallery.md source code

Images chargées grâce au plugin image_gallery et l’utilisation du code %GALLER Y foldername% qu’il suffit d’écrire, seul, sur une nouvelle ligne.

Remarque : ce plugin se nommait précédement CAROUSSEL, le tag utilisé était %CAROUSSEL foldername%

7.1. Exemple

7.2. Paramétrage

open_in_modal : permet de définir l’action devant se produire lorsqu’on clique sur une image en miniature; faut-il l’ouvrir dans une fenêtre modale (1) ou dans un nouvel onglet (0).

{
    "plugins": {
        "options": {
            "content": {
                "html": {
                    "image_gallery": {
                        "open_in_modal": 1
                    }
                }
            }
        }
    }
}

7.3. Librairie

image_gallery est un plugin implémentant l’addon jQuery Justified-Gallery de Miro Mannino

8. Fichier de tests du plugin JoliTypo

see the jolitypo.md source code

https://github.com/jolicode/JoliTypo

Ce plugin ne requiert aucun tag et, s’il est actif, se déclenche automatiquement pour corriger la typographie de la note.

Quelques exemples :

8.1. Librairie

Jolitype est un plugin implémentant la librairie JoliTypo

9. Fichier de tests du plugin microdata

see the microdata.md source code

Ce plugin de type content html va permettre d’insérer des tags <span itemprop="keywords">...</span> autour de mots que vous aurez identifié dans votre note.

De cette manière, vous allez souligner, auprès des moteurs de recherche, l’importance de ces mots dans votre contenu.

9.1. Exemples

Marknotes est un logiciel Open Source

Dans le code source de la page, le mot marknotes ci-dessus sera enrichi par un <span> qui indiquera aux moteurs de recherche qu’il s’agit d’un mot important dans votre contenu. La code HTML généré sera celui-ci :

<span class="microdata"><span itemscope itemtype="http://schema.org/Article"><span itemprop="keywords">marknotes</span></span></span>

Pour vous en convaincre, see the microdata.html source code et appuyer sur CTRL U, ainsi vous pourrez le constater.

9.2. Paramétrage

Ci-dessous un exemple de paramétrage du plugin microdata pour identifier deux mots clefs dans le contenu de la note.

{
    "plugins": {
        "options": {
            "content": {
                "html": {
                    "microdata": {
                        "not_in_tags": ["a", "abbr", "code", "pre"],
                        "keywords": [
                            "Christophe Avonture",
                            "marknotes"
                        ]
                    },
                }
            }
        }
    }
}

10. Fichier de tests du plugin Optimize

see the optimize.md source code

Avant de commencer à scroller, afficher votre console de débogage (touche F12 sous Windows) et cliquer sur l’onglet réseau pour qu’il soit actif.

Au cours de votre scroll sur cette page, vous pourrez constater que les images se chargent au fûr et à mesure et non pas, comme cela aurait été le cas si le plugin Optimize n’était pas actif, en une fois et lors de l’affichage de la page.

Optimize (sa fonctionnalité LazyLoad en l’occurrence) permet donc un affichage plus rapide de la page puisqu’il ne faut pas attendre que toutes les images référencées soient chargées en local.

10.1. Exemple

10.2. Librairie

Le plugin Optimize implémente la librairie Minify de Matthias Mullie ainsi que Lazysizes de Alexander Farkas

11. Reporting Security Issues

If you discover a security issue in marknotes, please report it by sending an email to christophe@aesecure.com

This will allow us to assess the risk, and make a fix available before we add a bug report to the GitHub repository.

Thanks for helping make marknotes safe for everyone.

12. Fichier de tests du plugin Tags

see the tags.md source code

Le plugin tags permet de surligner certains mots de votre texte et d’ajouter un hyperlien.

La phrase ci-dessous est construite pour en mentionner quelques-uns : grâce à jQuery et à bootstrap, le développeur web peut arriver à un résultat visuellement attractif alors même que son contenu est généré depuis un simple fichier markdown.

La liste des tags sera

  1. lue dans le fichier settings.json comme expliqué ci-dessous
  2. complétée par la liste des noms de dossiers de votre arborescence càd que si vous avez créé un dossier nommé comptabilité, ce mot est donc important pour vous, et il sera inclus dans les tags automatiquement (mais pas ajouté dans le fichier settings).

12.1. Configuration

La propriété class permet de définir la classe qui sera appliquée lorsqu’un tag sera trouvé. Chaque tag sera en effet inclus dans un <span> et la classe CSS définie par class sera appliquée.

La liste des tags doit être mentionnée dans un tableau comme ci-dessous illustré.

"plugins": {
    "options": {
        "content": {
            "html": {
                "tags": {
                    "class": "tag",
                    "keywords": [
                        "bootstrap",
                        "jQuery",
                        "markdown"
                    ]
                }
            }
        }
    }
}

13. Fichier de tests du plugin TOC

see the toc.md source code

Le plugin TOC (table of content) permet d’ajouter une table des matières dynamique dans le document. Pour cela, il suffit d’encoder le tag TOC_X où X est un chiffre (p.ex. 4) et permet d’afficher les titres dont le niveau est 2 jusqu’à X et cela, sous forme de table des matières, à l’endroit où le tag a été indiqué dans le fichier .md.

13.1. Exemple

13.1.1. Premier titre

En survollant le titre chaque titre, une ancre doit apparaître avec, si l’on clique dessus, le slug du titre qui s’affiche alors dans l’URL.

Cela afin de pouvoir générer une table des matières ou de fournir un lien vers le titre en question.

13.1.2. Second titre

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

13.1.3. Troisième titre

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat

13.2. Paramétrage

Voici un exemple de pararmétrage du plugin toc; utilisé pour cette note.

{
    "plugins": {
        "options": {
            "content": {
                "html": {
                    "toc": {
                        "text": "**Table des mati\u00e8res&nbsp;**",
                        "collapse": 1
                }
            }
        }
    }
}