{"id":831,"date":"2014-06-17T00:40:44","date_gmt":"2014-06-16T22:40:44","guid":{"rendered":"https:\/\/www.fanjoe.be\/?p=831"},"modified":"2014-06-17T04:02:00","modified_gmt":"2014-06-17T02:02:00","slug":"wordpress-les-balises-pre-et-code","status":"publish","type":"post","link":"https:\/\/www.fanjoe.be\/?p=831","title":{"rendered":"WordPress : Les balises <pre> et <code>"},"content":{"rendered":"

\"Balises-pre-code-01\"<\/a><\/p>\n

Lorsque, comme moi, vous ins\u00e9rez r\u00e9guli\u00e8rement du code dans des pages ou des billets WordPress, il peut \u00eatre int\u00e9ressant de le diff\u00e9rencier du texte g\u00e9n\u00e9ral et de le formater diff\u00e9remment.<\/p>\n

Pour ce faire, on va utiliser les balises <pre><\/strong> et <code><\/strong>.<\/p>\n

Malheureusement, elles ne sont pas toujours impl\u00e9ment\u00e9es d’origine dans le CSS du th\u00e8me WordPress utilis\u00e9.
\n
\nPour v\u00e9rifier si ces balises sont incluses dans votre th\u00e8me, faites un essai.<\/p>\n

Cr\u00e9ez un article et basculez en mode texte<\/strong> en cliquant sur cet onglet en haut \u00e0 droite de la fen\u00eatre d’\u00e9dition :<\/p>\n

\"Balises-pre-code-02\"<\/a><\/p>\n

R\u00e9digez quelques lignes et ins\u00e9rez les balises <pre> et <code> comme ceci :<\/p>\n

Ceci est ma <code><\/strong>premi\u00e8re ligne<\/code><\/strong> de texte.<\/p>\n

<pre><\/strong>Et ceci est mon premier bloc de texte.
\nIl va s’\u00e9tendre sur plusieurs lignes.
\nSur plusieurs lignes…
\nSur de nombreuses lignes…<\/pre><\/strong><\/p>\n

Cliquez sur Aper\u00e7u<\/strong> et regardez si la mise en forme de vos balises est diff\u00e9rente du corps du texte. Vous devriez obtenir quelques chose comme ceci :<\/p>\n

Ceci est ma premi\u00e8re ligne<\/code> de texte.<\/p>\n

Et ceci est mon premier bloc de texte.\r\nIl va s'\u00e9tendre sur plusieurs lignes.\r\nSur plusieurs lignes...\r\nSur de nombreuses lignes...<\/pre>\n
La balise <code><\/strong> porte sur une mise en forme de quelques mots tandis que la balise <pre><\/strong> s’\u00e9tend \u00e0 tout un paragraphe.<\/p>\n
Si rien ne se passe, c’est que les balises dont on parle ne sont pas pr\u00e9sentes dans le CSS de votre th\u00e8me.<\/p>\n
Voici comment les installer :<\/p>\n
Dans le menu lat\u00e9ral \u00e0 gauche, s\u00e9lectionnez Apparence, puis \u00c9diteur.<\/p>\n
\"Balises-pre-code-03\"<\/a><\/p>\n
Rep\u00e9rez si les balises <pre><\/strong> et <code><\/strong> sont pr\u00e9sentes. Si ce n’est pas le cas, on peut ajouter ces lignes :<\/p>\n
\/* #Pre & Code\r\n================================================== *\/\u00a0\u00a0 \u00a0\r\n\r\n\u00a0\u00a0 \u00a0code {\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0background:none repeat scroll #f9f9f9;\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0font-family: \"Lucida Console\", Monaco, monospace;\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0font-size: 11px;\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0}\r\n\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0pre {\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0background:none repeat scroll #f9f9f9;\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0border-left:5px solid #ccc;\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0clear:both;\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0font-family: \"Lucida Console\", Monaco, monospace;\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0font-size: 11px;\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0margin-bottom:18px;\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0overflow:auto;\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0padding:10px 15px;\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0}<\/pre>\n
Une fois la manipulation faite, cliquez sur \u00ab\u00a0Mettre \u00e0 jour le fichier\u00a0\u00bb.<\/p>\n
Voil\u00e0 ! Votre th\u00e8me int\u00e8gre maintenant les balises <pre><\/strong> et <code><\/strong>.<\/p>\n","protected":false},"excerpt":{"rendered":"
<\/a><\/p>\n
Lorsque, comme moi, vous ins\u00e9rez r\u00e9guli\u00e8rement du code dans des pages ou des billets WordPress, il peut \u00eatre…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[10,3,12],"tags":[73,72,67,71,70],"class_list":["post-831","post","type-post","status-publish","format-standard","hentry","category-geek","category-informatique","category-raspberrypi","tag-code","tag-pre","tag-balises","tag-mise-en-forme","tag-wordpress","end"],"jetpack_publicize_connections":[],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/www.fanjoe.be\/index.php?rest_route=\/wp\/v2\/posts\/831","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.fanjoe.be\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.fanjoe.be\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.fanjoe.be\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.fanjoe.be\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=831"}],"version-history":[{"count":0,"href":"https:\/\/www.fanjoe.be\/index.php?rest_route=\/wp\/v2\/posts\/831\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.fanjoe.be\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=831"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.fanjoe.be\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=831"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.fanjoe.be\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=831"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}