{"id":111,"date":"2022-09-20T15:22:36","date_gmt":"2022-09-20T13:22:36","guid":{"rendered":"https:\/\/intranet.projektninja.com\/?p=111"},"modified":"2024-06-18T23:59:46","modified_gmt":"2024-06-18T21:59:46","slug":"wtyczka-kolorowanie-skladni-kodu-wp","status":"publish","type":"post","link":"https:\/\/projektninja.com\/devblog\/wtyczki-ninja\/wtyczka-kolorowanie-skladni-kodu-wp\/","title":{"rendered":"Wtyczka: Ninja Maluje Kodzik &#8211; Kolorowanie sk\u0142adni kodu w WordPressie"},"content":{"rendered":"\n<p>Je\u015bli chcesz kolorowa\u0107 sk\u0142adni\u0119 kodu w elementach <code>&lt;pre>&lt;code><\/code> w swoim WordPressie, wypr\u00f3buj wtyczk\u0119 &#8220;Ninja Maluje Kodzik&#8221;. U\u017cywa ona biblioteki <strong>highlight.js<\/strong>, aby automatycznie wykrywa\u0107 j\u0119zyki programowania i stosowa\u0107 odpowiednie kolorowanie sk\u0142adni.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">ninja-maluje-kodzik.php<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;?php\n\/**\n * Plugin Name: Ninja Maluje Kodzik\n * Plugin URI: https:\/\/projektninja.com\/devblog\/wtyczki-ninja\/ninja-smigacz-wtyczka\/\n * Description: Skrypt koloruj\u0105cy sk\u0142adnie kodu w elementach &lt;pre>&lt;code>\n * Version: 1.0\n * Author: Maciej Mateusz Sajan - Projekt Ninja\n * Author URI: https:\/\/projektninja.com\/\n\n *\/\n\n\nfunction odpal_skrypty_ninja_maluje_kodzik(){\n    \n\n    wp_enqueue_script('SkryptKolorowaniaKodu',  '\/\/cdnjs.cloudflare.com\/ajax\/libs\/highlight.js\/11.6.0\/highlight.min.js');\n    \n\n    wp_enqueue_script('ninja_maluje_kodzik_js', plugins_url( '\/ninja-maluje-kodzik.js', __FILE__ ), array('jquery'), null, true);\n    \n    wp_register_style('ninja_maluje_kodzik_style', plugins_url('\/ninja-maluje-kodzik.css' ,__FILE__ ));\n    wp_register_style('stylHighlitera','\/\/cdnjs.cloudflare.com\/ajax\/libs\/highlight.js\/11.6.0\/styles\/atom-one-dark.min.css');\n\n    wp_enqueue_style('ninja_maluje_kodzik_style');\n    wp_enqueue_style('stylHighlitera');\n}\nadd_action('wp_enqueue_scripts', 'odpal_skrypty_ninja_maluje_kodzik');\n?><\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">ninja-maluje-kodzik.css<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>pre code {\n    border-radius: 15px;\n    border-bottom: solid #ffffff29 1px;\n}\n\n@media (max-width:425px) {\n    pre code {\n        font-size: 12px;\n    }\n}<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">ninja-maluje-kodzik.js<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>hljs.highlightAll();<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Przydatne Linki<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><a href=\"https:\/\/highlightjs.org\/\" target=\"_blank\" rel=\"noopener\" title=\"\">Highlight.js<\/a><\/strong><\/li>\n\n\n\n<li><a href=\"https:\/\/github.com\/highlightjs\/highlight.js#getting-started\" target=\"_blank\" rel=\"noopener\" title=\"\">Highlight na Github &#8211; instrukcje<\/a><\/li>\n\n\n\n<li><strong><a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/wp_enqueue_script\/\" target=\"_blank\" rel=\"noopener\" title=\"\">Dokumentacja wp_enqueue_script<\/a><\/strong><\/li>\n\n\n\n<li><a href=\"https:\/\/cdnjs.com\/libraries\/highlight.js\" target=\"_blank\" rel=\"noopener\" title=\"\">Highlight.js CDN<\/a><\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\"><\/ul>\n\n\n\n<p>Biblioteka fajnie z automatu wykrywa j\u0119zyki i stosuje odpowiednie kolorowanie sk\u0142adni we wszystkich elementach  &lt;code>.<br>Mo\u017cna pobra\u0107 bibliotek\u0119 ze strony i za\u0142adowa\u0107 do swojej b\u0105d\u017a u\u017cy\u0107 CDN jak w powy\u017cszym przyk\u0142adzie.<br>To samo tyczy si\u0119 motywu kolorowania sk\u0142adni ja u\u017cywam i polecam atom-one-dark.min.css, kt\u00f3ry jest zastosowany na tym blogu.<\/p>\n\n\n\n<div class=\"wp-block-file\"><a id=\"wp-block-file--media-60ce5342-c31b-4413-b494-482b626a18ef\" href=\"https:\/\/projektninja.com\/devblog\/wp-content\/uploads\/ninja-maluje-kodzik.zip\">ninja-maluje-kodzik<\/a><a href=\"https:\/\/projektninja.com\/devblog\/wp-content\/uploads\/ninja-maluje-kodzik.zip\" class=\"wp-block-file__button wp-element-button\" download aria-describedby=\"wp-block-file--media-60ce5342-c31b-4413-b494-482b626a18ef\">Pobierz<\/a><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Poznaj wtyczk\u0119 &#8220;Ninja Maluje Kodzik&#8221;, kt\u00f3ra koloruje sk\u0142adni\u0119 kodu w elementach <\/p>\n<pre><code> na twojej stronie WordPress. U\u017cywa do tego biblioteki highlight.js.<\/p>\n","protected":false},"author":1,"featured_media":749,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[274,275,259],"tags":[41,25,297,202,299,298,30,42,43,36,13,14,296,295,15],"class_list":["post-111","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-bajery","category-rozniaste","category-wtyczki-ninja","tag-code","tag-css","tag-development","tag-front-end","tag-highlight","tag-highlight-js","tag-javascript","tag-kod","tag-kolorowanie-skladni","tag-snippet","tag-wordpress","tag-wp","tag-wp_enqueue_script","tag-wp_enqueue_style","tag-wtyczki"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/projektninja.com\/devblog\/wp-json\/wp\/v2\/posts\/111","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/projektninja.com\/devblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/projektninja.com\/devblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/projektninja.com\/devblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/projektninja.com\/devblog\/wp-json\/wp\/v2\/comments?post=111"}],"version-history":[{"count":3,"href":"https:\/\/projektninja.com\/devblog\/wp-json\/wp\/v2\/posts\/111\/revisions"}],"predecessor-version":[{"id":748,"href":"https:\/\/projektninja.com\/devblog\/wp-json\/wp\/v2\/posts\/111\/revisions\/748"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/projektninja.com\/devblog\/wp-json\/wp\/v2\/media\/749"}],"wp:attachment":[{"href":"https:\/\/projektninja.com\/devblog\/wp-json\/wp\/v2\/media?parent=111"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/projektninja.com\/devblog\/wp-json\/wp\/v2\/categories?post=111"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/projektninja.com\/devblog\/wp-json\/wp\/v2\/tags?post=111"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}