Partage

Prism : colorisation syntaxique

20 octobre 2017 à 11:57:06

Bonjour,

Je poste ce message car j'essaie d'utiliser Prism afin de coloriser du code dans une page HTML.
Malgré mes essais, en suivant les instructions d'utilisation, la colorisation ne s'effectue pas.

Voici le code HTML :

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>Titre de la page</title>
  <link rel="stylesheet" href="style.css">
  <link href="prism.css" rel="stylesheet" />
</head>
<body>
	<section class="language-markup">
		<h1>Apprentissage HTML5 et CSS3</h1>		
		<h2>Création d'un lien</h2>
			<code><a href="#">Lien</a></code>
	</section>	
<script src="prism.js"></script>
</body>
</html>

Voici le résultat obtenu :

Auriez-vous une idée de pourquoi le code (balises) ne s'affiche pas ?

Merci

-
Edité par LeakcimWeb 20 octobre 2017 à 11:58:27

Lamecarlate

20 octobre 2017 à 12:40:26

Bonjour,

tu as lu la page http://prismjs.com/#basic-usage ?

Ça indique la syntaxe à utiliser.

Pas d'aide concernant le code par MP, le forum est là pour ça :)

LeakcimWeb

20 octobre 2017 à 14:08:28

Lamecarlate, merci de ta réponse

J'ai lu la documentation relative à la syntaxe.

Pour faire ressortir du code HTML, il faut utiliser la classe suivante :

<code class="language-markup">

Je ne parviens pas obtenir le résultat souhaité.

Je continue à chercher d'où peut venir le problème d'affichage.

Lamecarlate

20 octobre 2017 à 14:13:50

Déjà, mieux vaut encapsuler ça dans un <pre>, comme c'est suggéré.

Ensuite, "markup" n'est pas un langage dans la liste des langages supportés. Je ne suis même pas sûre que ce soit un langage tout court. Tu penses peut-être à "markdown" ?

Et enfin, qu'obtiens-tu ? As-tu des messages d'erreur dans la console de ton navigateur ? Des 404 dans l'onglet Réseau ?

Pas d'aide concernant le code par MP, le forum est là pour ça :)

LeakcimWeb

20 octobre 2017 à 14:58:47

Dans la documentation, j'ai trouvé ceci :

class="language-markup" : concerne le HTML ou le XML.

En englobant le code par <pre></pre> :

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>Titre de la page</title>
  <link rel="stylesheet" href="style.css">
  <link href="prism.css" rel="stylesheet">
</head>
<body>

	<h1>Apprentissage HTML5 et CSS3</h1>		
		<h2>Création d'un lien</h2>
			<pre>
				<code class="language-markup"><a href="#">Lien</a></code>
			</pre>
	
<script src="prism.js"></script>
</body>
</html>

Le résultat obtenu :

Le navigateur ne détecte aucune erreur (Google Chrome et Firefox).

Lamecarlate

20 octobre 2017 à 15:58:52

À quelle documentation fais-tu référence ? Le mot "XML" apparaît 3 fois dans http://prismjs.com et pas dans une phrase…

Et le premier tuto tiers mène vers https://websitebeaver.com/escape-html-inside-code-or-pre-tag-to-entities-to-display-raw-code-with-prismjs qui semble présenter ce que tu cherches à faire (parce que mettre du html dans <code> n'empêche pas le navigateur de l'interpréter ).

Pas d'aide concernant le code par MP, le forum est là pour ça :)

LeakcimWeb

20 octobre 2017 à 16:15:34

J'ai extrait l'information de cet article.

Je vais lire le tuto que tu donnes.

Je pensais qu'il suffisait de télécharger les fichiers CSS et JS fournis par Prism et de les intégrer à sa propre page HTML.

C'est peut-être plus "complexe" que cela.

Merci de ton aide.

-
Edité par LeakcimWeb 20 octobre 2017 à 16:17:00

Lamecarlate

20 octobre 2017 à 16:49:33

Ok, je bats ma coulpe, "markup" était bien dans la liste… mais au tout début, alors que moi j'allais chercher dans la liste alphabétique. Au temps pour moi.

> Je pensais qu'il suffisait de télécharger les fichiers CSS et JS fournis par Prism et de les intégrer à sa propre page HTML.

C'est le cas. Sauf pour le HTML et le XML puisque ça peut être interprété directement par le navigateur. C'est vraiment un cas particulier.

(juste pour info : l'article que tu cites est un article, pas une documentation, et encore moins "la" documentation en cas de doute, toujours se référer au site officiel)

Pas d'aide concernant le code par MP, le forum est là pour ça :)

LeakcimWeb

20 octobre 2017 à 17:04:51

(juste pour info : l'article que tu cites est un article, pas une documentation, et encore moins "la" documentation en cas de doute, toujours se référer au site officiel)

Il est vrai qu'employer le terme "documentation" n'était pas adéquat.

Je te réitère mes remerciements

Lucky13

20 octobre 2017 à 17:05:36

Hello,

Pour le code HTML, je créé des fichiers externes, les places dans un dossier et fais l'inclusion.

Exemple :

<pre data-src="../html/ton_fichier.html"></pre>

Je trouve cela bien plus pratique...

Pour les autres langages aucun souci , exemple sur mon blog :

-> http://www.blog.stephanejacquot.com//javascript/article/gerez-vos-evenements-avec-addeventlistener

Mode Dark -> http://www.blog.stephanejacquot.com//javascript/article/gerez-vos-evenements-avec-addeventlistener?code=dark

-
Edité par Lucky13 20 octobre 2017 à 17:13:51

❶ Feuille de style introuvable ❷ Chemins relatifs et absolus ❸ addEventListener & API Selectors ❹ Paletton colors ❺ Animations complexes en JS & CSS

Lamecarlate

20 octobre 2017 à 17:17:16

Lucky13 > ohhhh. C'est utilisé dans la page de Prism, mais absolument pas expliqué ! Très bien vu.

Pas d'aide concernant le code par MP, le forum est là pour ça :)

LeakcimWeb

24 octobre 2017 à 10:24:18

Bonjour,

Je souhaite que le code ci-dessous s'affiche avec la colorisation syntaxique :

<a href="#" alt="">Lien</a>

Faut-il que je crée un fichier HTML ne contenant que ce petit bout de code et que rédige la page HTML principale ainsi :

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>Titre de la page</title>
  <link rel="stylesheet" href="style.css">
  <link href="prism.css" rel="stylesheet">
</head>
<body>

<section>
	<pre data-src="../html_externe/lien.html" class="language-html">
	</pre>
</section>
	
<script src="prism.js"></script>
</body>
</html>

Que faudrait-il saisir entre les balises <pre> ?

Merci

-
Edité par LeakcimWeb 24 octobre 2017 à 10:31:52

Lamecarlate

24 octobre 2017 à 10:35:11

Ben, comme l'a expliqué Lucky13, si tu utilises le data-src, tu laisses le <pre> vide. (par contre perso même si c'est ingénieux, on perd en fonctionnalité si JS n'est pas activé, ce pourquoi je n'aime pas trop cette technique)

Sinon, il faudra écrire en utilisant "& lt ;" et "& gt ;" (sans les espaces) pour les "<" et ">", car c'est leur présence qui fait que le navigateur interprète le bout de HTML.

Pas d'aide concernant le code par MP, le forum est là pour ça :)

Lucky13

24 octobre 2017 à 11:18:02

C'est justement pour éviter cela que je préfère l'inclusion proposée par l'éditeur. Et plus simple côté organisation/modification. Pour un petit script cela passe encore, après c'est un peu plus embêtant...

Dans les faits tu as raison au niveau du JS , mais je me pose souvent cette question : en 2017-18 etc.. désactiver volontairement le JS, cela représente t-il une minorité ?

Ce langage ne fait-il pas définitivement partie du front (et back maintenant) ?, le désactiver part forcément d'un besoin ou intérêt personnel. C'est finalement un choix de l'utilisateur qui connait maintenant les causes de sa désactivation...

-
Edité par Lucky13 24 octobre 2017 à 11:20:41

❶ Feuille de style introuvable ❷ Chemins relatifs et absolus ❸ addEventListener & API Selectors ❹ Paletton colors ❺ Animations complexes en JS & CSS

LeakcimWeb

24 octobre 2017 à 11:41:10

Merci de vos réponses.

Dernière tentative avant de me résoudre à opter pour une autre solution.

J'ai deux fichiers HTML.

Le premier contient le HTML de la page principale :

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>Titre de la page</title>
  <link rel="stylesheet" href="style.css">
  <link href="prism.css" rel="stylesheet">
</head>
<body>

<section>
	<pre data-src="html_externe/lien.html" class="language-html">
	</pre>
</section>
	
<script src="prism.js"></script>
</body>
</html>

Le second contient le bout de code que je souhaite faire afficher en colorisation syntaxique :

<a href="#" alt="">Lien</a>

Ci-dessous, ce que j'obtiens (un cadre vide) :

Avez-vous une idée d'où peut venir le problème ?

Merci