• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

Elephorm-tp-git/Realtime-Markdown-Viewer

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称(OpenSource Name):

Elephorm-tp-git/Realtime-Markdown-Viewer

开源软件地址(OpenSource Url):

https://github.com/Elephorm-tp-git/Realtime-Markdown-Viewer

开源编程语言(OpenSource Language):

JavaScript 81.6%

开源软件介绍(OpenSource Introduction):

Formation Git Elephorm

Tout au cours de ce TP, nous allons tenter d'écrire un convertisseur

Nous voulons que notre application sache faire plusieurs choses :

Écrire des titres

h1

h2

h3

h4

h5
h6

Mettre des éléments en gras

comme ici

Mettre des élements barrés

( ne fonctionne pas sous github )

comme ici

Mettre des éléments en italique

comme là

Écrire des liens

Voici la documentation de référence de markdown et HTML.

Écrire des listes numérotées ou pas

  1. At vero eos et accusamus et iusto odio dignissimos ducimus
  2. Qui blanditiis praesentium voluptatum deleniti atque corrupti
  • Quos dolores et quas molestias excepturi sint
  • Obcaecati cupiditate non provident
  • Et harum quidem rerum facilis est et expedita distinctio
    1. Neque porro quisquam
    2. est qui dolorem ipsum
    3. quia dolor sit amet
    4. consectetur adipisci velit
  1. Quis autem vel eum iure reprehenderit
  2. qui in ea voluptate velit esse

Afficher des lignes séparatrices


Écrire du code

    var md   = document.getElementById("md").value,
    html = micromarkdown.parse(md);

Pouvoir référencer des liens sur les réseaux sociaux.

( ne fonctionne pas sous github )

  • Twitter @elephorm@t
  • GitHub @sabativi@gh
  • Facebook @elephorm@fb
  • Google+ @elephorm@gp

Fonctionnement de l'application

Dépendances

L'application est développée en nodejs. Pour plus d'informations cliquez sur le lien.

Elle a besoin du node package manager pour installer les dépendances.

Vous devez avoir nodejs et npm installé sur votre machine. L'installeur de nodejs est présent ici. Npm est installé avec node. Si vous voulez plus d'informations avec notamment une vidéo de présentation, c'est ici.

Assurez vous aussi d'avoir un compte github.

Une fois fait, vous devez :

  1. Forker le repository : en cliquant sur le bouton fork en haut à droite. Ceci constituera votre copie du serveur sur laquelle vous pourrez partager des modifications.
  2. Rentrer dans le répertoire : cd Realtime-Markdown-Viewer
  3. Installer les dépendances : npm install
  4. Lancez l'application : npm run dev
  5. Allez à cette url

Vous devez vous retrouver avec ceci comme écran :

Fonctionnement pour le TP.

Le répertoire qui nous intéresse est le répertoire converter. Vous n'aurez pas besoin de manipuler d'autres fichiers.

Ce dernier a la structure suivante :

  • markdown.js
  • tests/
    • markdown-test.js
    • features/
    • utils.js

Le fichier markdown contient le parser.

Le répertoire features contient un ensemble de fichier markdown et html pour nos tests.

Lorsque nous ajoutons une nouvelle fonctionnalité, nous allons accompagner celle ci d'un test, afin de vérifier son bon fonctionnement.

Pour ajouter un test, il suffit d'ajouter un fichier markdown et un fichier html portant le même nom dans le répertoire.

Pour lancer les tests, la commande à éxécuter à la racine du projet est :

npm run test

À gauche, vous avez le panel dans lequel vous pouvez écrire du markdown et à droite le rendu HTML.

Nous avons déjà développé une fonctionnalité pour vous. Le parsing des différents titres.

Essayer le code suivant dans le panel de gauche :

# Un grand titre
### Un plus petit titre
##### Doit correspondre à une balise <h5>
 

Vous devriez avoir le panel de droite qui se met à jour automatiquement.

Par contre si vous essayez d'écrire :

**Ce texte doit apparaitre en gras**

Vous pouvez voir qu'il ne se passe rien.

Tout au cours de ce TP, nous allons ajouter des fonctionnalités à notre parser Markdown.

L'objectif du TP n'est pas de faire le parser, nous l'utilisons comme pretexte pour utiliser git, toutes les réponses vous seront données au cours du TP, par contre, vous devez comprendre ce que vous faites quand vous utilisez des commandes git.




鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap