## Library dev ### NPM Scripts Explanation
npm install kairos-parserHere's a breakdown of the scripts defined in the package.json file:
#### build:all-css
- Command: "npm run build:css && npm run copy-scss"
- This command is used to build all css during the build.
#### 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.
"mkdir -p dist/styles/scss && cp src/styles/_kairos-colors-vars.scss dist/styles/scss/kairos-colors-vars.scss"#### 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: "rimraf ./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.
#### watch:yalc
- Command ""nodemon --watch src --ext ts,scss --exec \"npm run yalc\"""
- Used for dev. Listen modification and compile librairy for testing.
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.
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.
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 :
- '!!!
''!!! information'
est remplacé par une structure div contenant une icône d'information et une zone de contenu.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.
``javascript
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
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.
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.
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 / }
})
});
dans un Projet Angular#### 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.
npm run build
npm version patch
npm publish