Custom Tag Parser for Markdown Content

Library dev

NPM Scripts Explanation

Here's a breakdown of the scripts defined in the package.json file:

build:css

• Command: "node-sass src/styles/main.scss -o dist/styles --output-style compressed"
• This script compiles the SCSS files starting with main.scss from the src/styles directory into compressed CSS files and outputs them into the dist/styles directory.

build:ts

• Command: "tsc && tsc-alias"
• This script runs TypeScript compiler to convert .ts files to .js files (tsc) and then resolves the custom paths aliases defined in tsconfig.json using tsc-alias.

build

• Command: "npm run clean && npm run build:css && npm run build:ts"
• This is a composite script that first runs the clean script to remove the dist directory, then runs the build:css and build:ts scripts in sequence. It's essentially a full build process that prepares both CSS and TypeScript files.

clean

• Command: "rm -rf ./dist/"
• This script removes the dist directory and all its contents, effectively cleaning up the previously built files.

yalc

• Command: "npm run build && npx yalc push --scripts --update --replace"
• This script first runs the build script to compile and prepare all files. Then it uses yalc to push the changes to the local yalc store and update any projects that use this package. The --scripts, --update, and --replace flags ensure that the package is updated correctly in consuming projects.

Overview

Ce module fournit une fonction parseCustomTags conçue pour analyser les balises personnalisées dans le contenu Markdown et les remplacer par des balises HTML correspondantes pour améliorer le style et la fonctionnalité. C'est particulièrement utile pour les applications qui doivent afficher du contenu Markdown avec des éléments de style personnalisés.

Fonction

parseCustomTags(str: string): string

Description : Analyse une chaîne contenant des balises Markdown personnalisées et les remplace par des balises HTML prédéfinies et des structures.

Paramètres :

• str : Une chaîne représentant le contenu Markdown avec des balises personnalisées.

Retourne : Une chaîne où toutes les balises personnalisées ont été remplacées par leurs représentations HTML correspondantes.

Custom Tag Mappings

La fonction utilise un dictionnaire prédéfini customTagMappings où chaque clé est une balise personnalisée dans le Markdown et la valeur est son équivalent HTML. Par exemple :

• '!!!</p>' est remplacé par '</div></div>'
• '<p>!!! information' est remplacé par une structure div contenant une icône d'information et une zone de contenu.

Utilisation

Pour utiliser cette fonction, importez parseCustomTags de ce module et passez le contenu Markdown sous forme de chaîne. La fonction renverra le contenu avec les balises personnalisées remplacées par des balises HTML.

import { parseCustomTags } from "us-markdown-tokenizer/dist/tokenizer/parser";

// Exemple d'utilisation
const markdownContent = "Votre contenu Markdown avec des balises personnalisées !!!";
const htmlContent = parseCustomTags(markdownContent);
// Utilisez htmlContent dans votre application

# Configuration Personnalisée de la Barre d'outils pour l'Éditeur EasyMDE

## Overview

Ce module étend la fonctionnalité de base d'EasyMDE, un éditeur Markdown, avec une configuration personnalisée de la barre d'outils. Il fournit une gamme de boutons personnalisés et d'actions adaptées à des types de cours spécifiques ou à des besoins de balisage personnalisés.

## Fonction Principale

### `getToolbarConfig(courseType: string, self: { saveRecord: () => void }): any[]`

**Description** : Génère un tableau de configuration de la barre d'outils pour EasyMDE basé sur le type de cours.

**Paramètres** :
- `courseType` : Une chaîne indiquant le type de cours, affectant la disposition de la barre d'outils.
- `self` : Un objet avec une méthode `saveRecord` pour enregistrer le contenu de l'éditeur.

**Retourne** : Un tableau de configurations de boutons de la barre d'outils.

## Utilisation

Importez `getToolbarConfig` de ce module et utilisez-le pour configurer la barre d'outils dans EasyMDE.

```javascript
import * as EasyMDE from "easymde";
import { getToolbarConfig } from "us-markdown-tokenizer/dist/tokenizer/getToolbarConfig";

// Exemple d'utilisation
const editor = new EasyMDE({
  element: document.getElementById('votre-textarea-id'),
  toolbar: getToolbarConfig('VotreTypeDeCours', {
    saveRecord: () => { /* Votre fonction d'enregistrement */ }
  })
});


# Intégration des Styles de `us-markdown-tokenizer` dans un Projet Angular

## Étapes d'Intégration

### Étape 1 : Importer le Fichier SCSS

#### Localisation de votre fichier de styles global

1. Dans votre projet Angular, trouvez le fichier global `styles.scss`. Ce fichier se trouve généralement à la racine du répertoire `src`.

#### Modification du fichier `styles.scss`

2. En haut de votre fichier `styles.scss`, ajoutez la déclaration d'importation suivante :

    ```scss
    @import 'us-markdown-tokenizer/styles/main.scss';
    ```

    En ajoutant cette ligne, vous rendez tous les styles du fichier `main.scss` du package `us-markdown-tokenizer` disponibles globalement dans votre application.