Comment créer un diaporama à partir de Markdown Notes

Réduction Le formatage du texte a révolutionné la prise de notes. Cela donne un moyen de formater sans encombrer ce qui est écrit. Vient maintenant le moment où vous devez faire une présentation basée sur vos notes. Vous avez besoin d'un moyen simple et efficace pour créer votre présentation à partir de vos notes. Dans ce tutoriel, je vais vous montrer comment créer un HTML diaporama de notes de démarques.

Markdown en HTML

Un programme de rendu est un programme qui prend la réduction et le traduit dans un autre format. Le meilleur rendu que j'ai utilisé est kramdown. Kramdown est un programme Ruby qui prend du texte dans un format et le traduit dans un autre. Par défaut, réduction à HTML.

Puisque Rubis est pré-installé sur tous les Mac, l'installation kramdown est facile. Pour installer kramdown, ouvrir un Terminal et type:

sudo gem installe kramdown

Une fois installé, le kramdown la commande est utilisable. Par exemple, mettez ce qui suit réduction dans un fichier appelé test.md:

# Ceci est un en-tête - Elément de puce - Un autre élément de puce Juste du texte.

Sur la ligne de commande, tapez:

kramdown test.md> test.html

Il y aura maintenant un test.html fichier avec ce contenu:

Ceci est un en-tête

Point de balle
Un autre article de balle

Juste du texte.

le kramdown programme ne traduit que le réduction donné à valide HTML. Il n'essaie pas de créer une page complète correctement formatée HTML avec un en-tête et des sections de corps. C’est important pour créer un diaporama à partir de réduction. Pour chaque diapositive, le HTML pour le contenu donné sera généré et pas rien d'extra. Il est facile d’envelopper les diapositives à l’intérieur du HTML pour la page de diaporama.

Principes de base d'un diaporama HTML

La page de diaporama a un début HTML, les toboggans HTML, et la fin HTML. Les sections de début et de fin sont copiées, tandis que les diapositives HTML est généré par kramdown avec quelques travaux de nettoyage supplémentaires.

Créez un fichier appelé presbegin.html avec ce code:

   Diaporama

C'est le début du diaporama. Ce n'est pas complet HTML page. Le corps du HTML a trois divs: récipient div, section0 div, et un faire glisser div. le récipient div contient l'intégralité du diaporama.

L'intérieur du conteneur est le section0 div et c'est faire glisser div. Les sections aident à tout formater dans chaque section de diapositive, tandis que chaque diapositive contient le formatage de cette diapositive..

La fin sera similaire. Créez un fichier appelé presend.html et placez le code suivant:

Pas tant! Il ferme les divs de la dernière diapositive et le corps et html Mots clés.

La seule mise en forme spéciale nécessaire dans les notes de réduction concerne les images et les détails de la fin de chaque diapositive. Puisque réduction a un type d'ancrage pour les images, cette balise est utilisée avec une différence: au lieu d'avoir une description textuelle pour l'image, cette zone décrira les classes à attacher à l'image. Également réduction code pour règles horizontales est utilisé pour séparer les diapositives.

Par conséquent, la formule de base pour créer le diaporama est la suivante: copier le presbegin.html, produire HTML à partir de la démarque, traduisez tout

balises à

, corrigez toutes les balises picture pour utiliser le sous-texte en tant que classes et copiez le presend.html.

Créez un nouveau fichier appelé pres.rb et placez ce code:

#! / usr / bin / ruby # # Définit des variables. # require ("FileUtils") $ presDir = "" pressBaseDir = File.dirname (__ FILE__) theme = ARGV [1] # # Téléchargez les éléments de la présentation de la diapositive. # presBegin = 'cat' # pressBaseDir /presbegin.html "presEnd = 'cat' # pressBaseDir /presend.html" # # Récupère le répertoire de la présentation. # $ presDir = File.dirname (ARGV [0]) # # Convertit le Markdown en HTML. # presTextHTML = 'cat' # ARGV [0] '| kramdown '# # Convertit les règles horizontales en divs dont nous avons besoin. # $ divCount = 1 tant que presTextHTML.sub! (/ \
/, "

")! = nil do $ divCount = $ divCount + 1 fin $ divCount = $ divCount -1 # # Assurez-vous que la dernière div est fermée. # presTextHTML + ="

"; # # Corrige l’affichage de toutes les images après la diapositive. # M = / \\\<\/p\>/.match(presTextHTML) if m! = nil postMatch = "" presTextHTML = "" while m! = nil presTextHTML + = m.pre_match presTextHTML + = "

Ce Rubis Le code exécute les actions décrites. Le fichier de programme doit être rendu exécutable avec:

chmod a + x pres.rb

Le programme est utilisé avec la ligne de commande suivante:

pres.rb

Ce code suppose que la présentation ne se trouve pas dans le même répertoire que le code. Par conséquent, partout où vous avez le code, assurez-vous de l'ajouter à votre chemin.

Mise en forme avec CSS

Avec la traduction en vrac de la réduction déposer dans HTML l’étape suivante consiste à formater les diapositives. Pour créer les styles nécessaires, ajoutez ce code à la section d’en-tête de la presbegin.html fichier:

La première partie est un script de réinitialisation utilisant MeyerWeb Reset. Chaque fois que je travaille avec HTML et CSS, Un script de réinitialisation doit être utilisé pour mettre tous les navigateurs sur le même terrain. C'est une bonne pratique de conception.

La deuxième partie comprend les styles nécessaires pour que les diapositives occupent l'écran, le texte à centrer, l'ordre et le formatage de base des images et la configuration de base pour une image d'arrière-plan..

J'ai réglé la taille de l'écran sur 1200x640 pixels, ce qui convient parfaitement à mon écran Macbook Air 11 ". Vous pouvez le modifier à votre guise..

Créez maintenant un fichier de thème. Faire un fichier appelé Basic.css et placez le code suivant:

/ * * Sera le fichier CSS du thème de base * / body background-color: rgba (79, 150, 200, 0.4);  .slide color: rgb (221, 239, 252); couleur de fond: rgba (79, 150, 200, 0,4);  .slide h1, .slide h2, .slide h3, .slide h4, .slide h5, .slide h6, .slide p, .slide ol, .slide ul1 font-family: Times;  .background opacité: .80;  .slide h1 font-size: 10em;  .slide h2 font-size: 8em;  .slide h3 font-size: 6em;  .slide h4 font-size: 4em;  .slide h5 font-size: 2em;  .slide h6 font-size: 1em;  .slide p font-size: 2em;  .slide ol list-style: decimal-lead-zero; text-align: left;  .slide ol li taille de la police: 2em;  .slide ul list-style: disc; text-align: left;  .slide ul li taille de la police: 2em;

C'est un thème de base que vous pouvez utiliser pour créer vos propres thèmes. Ce fichier de thème sera copié dans le répertoire de la présentation et renommé en theme.css. C'est le fichier chargé par le diaporama.

Pour ajouter un style supplémentaire aux images, créez une balise de classe dans le fichier CSS du thème. Ajoutez cette balise de classe au texte de l'image. Par conséquent, une image avec la balise background ressemblerait à ceci:

![fond] (image-01.jpg)

Ajouter le Javascript

Pour charger plus rapidement une page Web, le JavaScripts devrait être au bas de la page. Par conséquent, dans le presend.html, ajouter ce code juste avant la fermeture corps étiquette:

Ce code se charge dans Piege a souris pour contrôler le diaporama et jQuery effectuer les transitions. Deux variables globales sont utilisées pour contrôler le diaporama: slideNum et durée. le slideNum est le numéro de la diapositive actuelle, et durée définit la vitesse du changement. Plus la durée est courte, plus les diapositives changent rapidement.

Trois fonctions sont ensuite définies: diapositive suivante(), prevSlide (), et beginSlide (). Ces fonctions permettent à l'utilisateur de passer respectivement à la diapositive suivante, précédente et à la première diapositive..

Après les fonctions, j'ai utilisé un crochet à la jQuery fonction prête qui traite le code une fois que tout est chargé dans le navigateur. Une fois que tout est chargé, toutes les diapositives sont masquées et seule la première diapositive est rendue visible. Puis le Flèche gauche la clé est liée à la prevSlide () la fonction, la touche flèche droite est lié à la diapositive suivante() fonction, et la b la clé est liée à la beginSlide () une fonction.

Dans le code, vous remarquerez le window.MaxSlideNum variable globale. le rubis code pour la création des diapositives définit cette variable à l'intérieur du HTML généré pour la présentation de diapositives. Il indique aux fonctions de contrôle le nombre de diapositives de cette présentation..

Autres façons d'utiliser le script

Bien que l’utilisation du programme en ligne de commande soit faisable, cela n’est pas pratique. Le tutoriel, Écrire des actions Dropzone 3, montre comment créer un Dropzone 3 action. Suivez ce tutoriel pour créer un nouveau Dropzone 3 action avec le code suivant:

# Infos sur l'action Dropzone # Nom: Convertisseur de présentation MD en HTML # Description: Prend un fichier de démarquage et le convertit en une présentation HTML / CSS dans le répertoire des fichiers. Cela suppose que kramdown soit installé localement. Pour l'installer, allez dans une ligne de commande et tapez "sudo gem install kramdown". # Poignées: Fichiers # Créateur: Richard Guay # URL: http://customct.com # Evénements: Clics, Dragged # KeyModifiers: Commande, Option, Contrôle, Shift # SkipConfig: Non # RunsSandboxed: Oui # Version: 1.0 # MinDropzoneVersion: 3.0 # # Fonction: glissé # # Description: Cette fonction est appelée. Dropzone a des fichiers déposés sur cette action. # Il a ensuite traité chaque fichier donné comme une présentation démarquée. # def dragged # # Définit des variables. # $ presDir = "" pressBaseDir = File.expand_path (".") presNum = $ items.count theme = défini? (ENV ['theme'])? ENV ['theme']: "Basic" # # Dites à Dropzone que nous commençons. # $ dz.begin ("Conversion de # presNum présentations ...") $ dz.determinate (true) # # Récupère les éléments de la présentation de diapositives chargés. # presBegin = 'cat' # pressBaseDir /presbegin.html "presEnd = 'cat' # pressBaseDir /presend.html" # # Index sur toutes les présentations données. # for index in 0… presNum # # Récupère le répertoire de la présentation. # $ presDir = File.dirname ($ items [index]) # # Convertit le Markdown en HTML. # presTextHTML = 'cat' # $ items [index] '| kramdown '# # Convertit les règles horizontales en divs dont nous avons besoin. # $ divCount = 1 tant que presTextHTML.sub! (/ \
/, "

")! = nil do $ divCount = $ divCount + 1 fin $ divCount = $ divCount -1 # # Assurez-vous que la dernière div est fermée. # presTextHTML + ="

"postMatch = m.post_match m = / \\\<\/p\>/.match(m.post_match) end presTextHTML + = postMatch end presTextHTML + = ""# # Ecrit le code HTML dans un fichier index.html de ce répertoire. # Target = open (" # $ presDir /index.html ", 'w') target.truncate (0) target.write (presBegin + presTextHTML + presEnd) target.close # # Copiez le fichier CSS dans ce répertoire et renommez-le en theme.css. # FileUtils.cp ("# pressBaseDir / # theme .css", $ presDir) File.rename (" # $ presDir / # theme .css "," # $ presDir /theme.css ") # # Indiquez à Dropzone quel pourcentage est effectué. # $ dz.percent ((((index + 1)) * 100 ) / presNum) .to_i) end # # Informez Dropzone que nous avons terminé. # $ dz.finish ("Toutes les présentations faites.") # Vous devez toujours appeler $ dz.url ou $ dz.text en dernier dans votre script. au-dessous de la ligne $ dz.text place du texte dans le presse-papiers. # Si vous ne souhaitez rien placer dans le presse-papiers, appelez toujours $ dz.url (false) $ dz.url ("file: // # $ presDir /index.html ") end def clicked # # Permet à l'utilisateur de choisir un thème. # theme =" Basic "# # Affiche une liste de thèmes. # qstr =" standard-dropdown --title \ "Compress Files: Graphic Format \ "--text \" Quel thème? \ "--Ite ms "themlist = [] i = 0 Dir.glob (" *. css ") | nom du fichier | nomfichier = nomfichier (nomfichier, ".css") qstr + = "\" # nomfichier \ "" la liste [i] = nomfichier i + = 1 bouton2, index = $ dz.cocoa_dialog (qstr) .split ("\ n") index = index.to_i theme = liste de thèmes [index] # # Définit le thème sélectionné. # $ dz.save_value ("theme", theme) # # Indique à l'utilisateur ce qu'il a sélectionné. # $ dz.finish ("Vous avez sélectionné '# thème' pour votre thème.") $ dz.url (false) end

Une fois créé, chargez l'action dans pour Dropzone 3. Lorsqu'un réduction le fichier est déposé sur la zone, il créera la présentation dans le même répertoire.

Action Dropzone 3

Puisque Dropzone 3 est idéal pour y déposer de nombreux éléments, vous pouvez créer de nombreuses présentations à la fois. Il suffit de collecter les fichiers dans le Drop Bar. Puis déplacez-les vers la zone de transfert pour la conversion. En cliquant sur l'action, vous pourrez choisir le thème à utiliser. Le terminé Dropzone 3 l'action est incluse dans le téléchargement.

Markdown à la présentation Alfred Workflow

Cela peut aussi être transformé en un Alfred flux de travail. Le flux de travail terminé est inclus dans le téléchargement. le mds: thème Cette commande vous permet de sélectionner le thème à utiliser. le mds: showtheme affichera le nom du jeu actuellement défini dans une notification. Vous pouvez utiliser le Alfred Browser pour afficher un fichier de démarques. Quand vous frappez flèche droite sur le fichier, vous pouvez sélectionner le Markdown to Slides commande pour créer la présentation.

Deckset fait tout

Si vous trouvez ce programme utile, vous pouvez vérifier Deckset.

Deckset Markdown à la présentation

Deckset prend un réduction fichier et le convertit en un diaporama. Il a plus de fonctionnalités que celles présentées dans ce tutoriel. Il a également beaucoup de grands thèmes à utiliser.

Conclusion

Avec le temps étant toujours sur une prime, il est bon d'utiliser des notes comme base pour une présentation. Maintenant que vous avez les outils entre vos mains, allez faire de belles présentations. Ce code est très basique et de nombreuses améliorations sont possibles. Si vous avez des modifications ou de nouveaux thèmes pour ce code, veuillez les transmettre..

Compétences informatiques