Introduction
Dans ce projet, nous allons créer un éditeur Markdown basé sur le web qui offre une aperçu HTML en direct tandis que vous tapez. En utilisant des bibliothèques telles que Ace Editor, marked et highlight.js, vous développerez un éditeur intuitif qui permet non seulement d'écrire en Markdown, mais également de sauvegarder les données entre les sessions de navigateur et de mettre en évidence les extraits de code dans l'aperçu.
👀 Aperçu
🎯 Tâches
Dans ce projet, vous allez apprendre :
- Comment configurer la structure HTML pour l'éditeur et le visionneur
- Comment styliser l'éditeur et le visionneur pour une expérience utilisateur agréable
- Comment implémenter la logique d'initialisation de l'éditeur
- Comment analyser le Markdown en HTML et l'afficher dans le visionneur
- Comment synchroniser le défilement entre l'éditeur et le visionneur
🏆 Réalisations
Après avoir terminé ce projet, vous serez capable de :
- Développer un éditeur Markdown basé sur le web avec aperçu HTML en direct
- Utiliser des bibliothèques telles que Ace Editor,
markedethighlight.jspour améliorer la fonctionnalité de l'éditeur - Implémenter la persistance des données entre les sessions de navigateur
- Fournir une mise en évidence de la syntaxe du code dans l'aperçu Markdown
Configurer la structure HTML
Exigences :
- Connaissance des balises HTML de base.
Fonctionnalité :
- Jeter les bases pour l'éditeur et le visionneur.
Dans index.html, configurez une structure HTML de base pour l'éditeur et le visionneur. Réservez de l'espace pour l'éditeur et le panneau d'aperçu.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>markdown editor</title>
<!-- Importez les fichiers CSS -->
<link rel="stylesheet" href="libs/bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" href="libs/highlightjs/default.min.css" />
<link rel="stylesheet" href="libs/highlightjs/monokai_sublime.min.css" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container-fluid">
<div class="row">
<!-- Div de l'éditeur Markdown -->
<div class="col-md-6" id="md-editor"></div>
<!-- Div de la boîte d'aperçu Markdown -->
<div class="col-md-6" id="md-viewer"></div>
</div>
</div>
<!-- Importez les fichiers JavaScript -->
<script src="libs/jquery.min.js"></script>
<script src="libs/bootstrap/js/bootstrap.min.js"></script>
<script src="libs/ace/ace.js"></script>
<script src="libs/marked.min.js"></script>
<script src="libs/highlightjs/highlight.min.js"></script>
<script src="main.js"></script>
</body>
</html>
Styler l'éditeur et le visualiseur
Exigences :
- Connaissance de base en CSS.
Fonctionnalité :
- Stylisez l'éditeur et le visionneur pour une expérience utilisateur agréable.
Insérez les styles fournis dans style.css. Cela vous assurera que l'éditeur et le visionneur sont correctement stylisés et occupent chacun la moitié de l'écran.
/* style.css */
/* Zone d'édition */
#md-editor {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
font-size: 16px;
}
/* Zone d'aperçu */
#md-viewer {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 50%;
overflow-y: scroll;
}
Ce CSS assure que l'éditeur et le visionneur occupent chacun la moitié de l'écran et sont disposés côte à côte.
Implémenter l'initialisation de l'éditeur
Exigences :
- Compréhension de base de JavaScript.
Fonctionnalité :
- Configurez l'éditeur Ace avec les paramètres souhaités.
Démarrez main.js avec la logique d'initialisation de l'éditeur.
/* main.js */
/**
* Initialise l'éditeur
*
*/
function initEditor() {
// Initialise l'éditeur
var editor = ace.edit("md-editor");
editor.setTheme("ace/theme/monokai"); // Définit le style du thème
editor.getSession().setMode("ace/mode/markdown"); // Définit le mode d'édition
editor.getSession().setTabSize(4); // Définit la tabulation sur 4 espaces
editor.getSession().setUseWrapMode(true); // Active le retour à la ligne automatique
// Charge les données à partir du stockage local
editor.setValue(localStorage.localData || "");
}
Implémenter l'analyse du Markdown
Exigences :
- Connaissance de JavaScript et de jQuery.
Fonctionnalité :
- Convertissez le Markdown en HTML.
- Affichez le HTML dans le visionneur.
/**
* Analyse le markdown
*
* @params {objet} éditeur - Instance de l'éditeur
* @return {objet} - Boîte d'aperçu
*/
function parseMarkdown(éditeur) {
var visionneur = $("#md-viewer"); // Boîte d'aperçu du document
var données = éditeur.getValue(); // Récupère les données de l'éditeur
// Enregistre les données dans le stockage local
localStorage.localData = données;
// Analyse le markdown
données = marqué(données);
visionneur.html(données);
// Met en évidence le code dans le document Markdown
$("pre > code", visionneur).each(function () {
hljs.highlightBlock(this);
});
// Retourne le visionneur
return visionneur;
}
Synchroniser le défilement entre l'éditeur et le visualiseur
Exigences :
- Compréhension des événements JavaScript.
Fonctionnalité :
- Synchronisez le défilement de l'éditeur et du visionneur.
/*
* Contrôle la barre de défilement
* Synchronise le défilement entre l'éditeur et la boîte d'aperçu
*
* @params {objet} éditeur - Instance de l'éditeur
* @params {objet} visionneur - Boîte d'aperçu
*/
function fixScrollBar(éditeur, visionneur) {
var session = éditeur.getSession();
// Défile jusqu'à la première ligne par défaut
session.setScrollTop(0);
// Lie l'événement de défilement à l'éditeur
session.on("changeScrollTop", function () {
var sTop = session.getScrollTop();
// Définit la barre de défilement pour la boîte d'aperçu
visionneur.scrollTop(sTop);
});
// Définit l'événement de défilement pour la boîte d'aperçu
visionneur.on("scroll", function () {
var sTop = visionneur.scrollTop();
// Définit la barre de défilement pour l'éditeur
session.setScrollTop(sTop);
});
}
Intégrer toutes les fonctions et initialiser l'éditeur
Exigences :
- Maîtrise de l'appel de fonctions en JavaScript.
Fonctionnalité :
- Fusionnez toutes les étapes précédentes en un code unifié.
- Initialisez l'éditeur et appliquez toutes les fonctionnalités.
/* main.js */
initEditor();
/**
* Initialise l'éditeur
*
*/
function initEditor() {
// Initialise l'éditeur
var editor = ace.edit("md-editor");
editor.setTheme("ace/theme/monokai"); // Définit le style du thème
editor.getSession().setMode("ace/mode/markdown"); // Définit le mode d'édition
editor.getSession().setTabSize(4); // Définit la tabulation sur 4 espaces
editor.getSession().setUseWrapMode(true); // Active le retour à la ligne automatique
// Charge les données à partir du stockage local
editor.setValue(localStorage.localData || "");
// Analyse les données chargées à partir du stockage local
var viewer = parseMarkdown(editor);
// Contrôle la barre de défilement
fixScrollBar(editor, viewer);
// Analyse en temps réel du markdown
editor.getSession().on("change", function (e) {
parseMarkdown(editor);
});
}
Exécution du projet
- Ouvrez
index.htmldans un navigateur web.
- Pour visualiser et tester votre éditeur Markdown.
- L'effet de la page est le suivant :
Résumé
Félicitations ! Vous venez de créer un éditeur Markdown basé sur le web avec une fonctionnalité de prévisualisation en direct. Maintenant, vous pouvez écrire du contenu Markdown, voir sa représentation HTML en direct et même mettre en évidence les extraits de code. Rappelez-vous, le contenu que vous écrivez persistera entre les sessions de navigateur grâce à localStorage. Bonne programmation !
