{"id":27668,"date":"2021-05-13T11:17:00","date_gmt":"2021-05-13T08:17:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=27668"},"modified":"2021-10-18T03:47:37","modified_gmt":"2021-10-18T00:47:37","slug":"prism-ladnie-wykonany-podswietlacz-skladni-dla-twojej-witryny","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/pl\/prism-ladnie-wykonany-podswietlacz-skladni-dla-twojej-witryny\/","title":{"rendered":"PRISM \u2014 \u0142adnie wykonany pod\u015bwietlacz sk\u0142adni dla Twojej witryny"},"content":{"rendered":"<p>Je\u015bli prowadzisz bloga programistycznego lub stron\u0119 internetow\u0105, kt\u00f3ra wyja\u015bnia, jak kodowa\u0107, musisz wy\u015bwietla\u0107 kod na swoich stronach internetowych. Twoi go\u015bcie zwracaj\u0105 uwag\u0119 na Tw\u00f3j napisany kod i ucz\u0105 si\u0119 z niego. Z tego powodu powiniene\u015b \u0142adnie wy\u015bwietla\u0107 sw\u00f3j kod na swojej stronie internetowej, co u\u0142atwi u\u017cytkownikom jego odczytanie. Zapewnia r\u00f3wnie\u017c lepsze wra\u017cenia u\u017cytkownika odwiedzaj\u0105cym Twoj\u0105 witryn\u0119.<\/p>\n<p>Na tym blogu u\u017cywamy wtyczki WordPress <a href=\"https:\/\/wordpress.org\/plugins\/syntaxhighlighter\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">SyntaxHighlighter Evolved<\/a> do pod\u015bwietlania sk\u0142adni kodu. Jednak w tym artykule nie omawiamy tej wtyczki WordPress. Zamiast tego chcieliby\u015bmy zwr\u00f3ci\u0107 uwag\u0119 odwiedzaj\u0105cych na <a href=\"https:\/\/prismjs.com\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">PRISM,<\/a> kt\u00f3ry jest szeroko stosowanym pod\u015bwietlaniem sk\u0142adni na tysi\u0105cach stron internetowych.<\/p>\n<p>Najpopularniejsze blogi korzystaj\u0105ce z PRISM to Smashing Magazine, CSS-TRICKS, SitePoint. Je\u015bli szukasz rozwi\u0105zania, jak korzysta\u0107 z pod\u015bwietlacza sk\u0142adni, czytaj dalej.<\/p>\n<h3>Instalacja<\/h3>\n<p>Aby u\u017cy\u0107 markera kodu PRISM, musisz umie\u015bci\u0107 ich JS i CSS na swojej stronie. PRISM pozwala dostosowa\u0107 wyb\u00f3r motywu i j\u0119zyka. Uda\u0107 si\u0119 na <a href=\"https:\/\/prismjs.com\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">stronie g\u0142\u00f3wnej PRISM<\/a> i kliknij Pobierz \u201eprzycisk&quot;.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/04\/post-20630-608211618250b.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/04\/post-20630-608211618250b.png\" alt=\"PRISM \u2014 \u0142adnie wykonany pod\u015bwietlacz sk\u0142adni dla Twojej witryny\" ><\/a><\/p>\n<p>Na nast\u0119pnej stronie wybierz motyw, kt\u00f3ry b\u0119dzie pasowa\u0142 do Twojej witryny. W sekcji J\u0119zyki wybierz j\u0119zyki, kt\u00f3rych uczy Twoja witryna. Tutaj zalecamy wyb\u00f3r tylko tych j\u0119zyk\u00f3w, kt\u00f3re s\u0105 wymagane. W przeciwnym razie pliki JS i CSS PRISM zajm\u0105 niepotrzebne miejsce.<\/p>\n<p>Po wybraniu opcji przewi\u0144 w d\u00f3\u0142 i pobierz oddzielnie spersonalizowane pliki JS i CSS.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/04\/post-20630-608211631b429.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/04\/post-20630-608211631b429.png\" alt=\"PRISM \u2014 \u0142adnie wykonany pod\u015bwietlacz sk\u0142adni dla Twojej witryny\" ><\/a><\/p>\n<h3>Jak korzysta\u0107 z pod\u015bwietlacza sk\u0142adni<\/h3>\n<p>Pobrali\u015bmy pliki JS i CSS, kt\u00f3re podkre\u015bl\u0105 sk\u0142adni\u0119 naszego kodu. Nast\u0119pn\u0105 rzecz\u0105, kt\u00f3r\u0105 trzeba zobaczy\u0107, jest to, jak u\u017cywa\u0107 go w rzeczywistym kodzie podczas wy\u015bwietlania na stronach internetowych.<\/p>\n<p>Najpierw musisz umie\u015bci\u0107 te pobrane pliki w swojej witrynie.<\/p>\n<pre><code>&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;head&gt;\n\u00a0\u00a0\u00a0\u00a0...\n\u00a0\u00a0\u00a0\u00a0&lt;link href=\"css\/prism.css\" rel=\"stylesheet\" \/&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n\u00a0\u00a0\u00a0\u00a0...\n\u00a0\u00a0\u00a0\u00a0&lt;script src=\"js\/prism.js\"&gt;&lt;\/script&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n<p>Nast\u0119pnie PRISM zapewnia unikaln\u0105 klas\u0119 dla ka\u017cdego obs\u0142ugiwanego j\u0119zyka, kt\u00f3rej musimy u\u017cy\u0107 podczas dodawania sk\u0142adni j\u0119zyka. Na przyk\u0142ad, je\u015bli piszesz kod PHP, powiniene\u015b owin\u0105\u0107 sw\u00f3j kod PHP w nast\u0119puj\u0105cy spos\u00f3b.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/04\/post-20630-608211641e7e9.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/04\/post-20630-608211641e7e9.png\" alt=\"PRISM \u2014 \u0142adnie wykonany pod\u015bwietlacz sk\u0142adni dla Twojej witryny\" ><\/a><\/p>\n<p>Zauwa\u017c, \u017ce u\u017cyli\u015bmy \u201e&lt;?php&#8221; zamiast \u201e&lt;?php&#8221;. Podczas korzystania z PRISM musisz u\u017cywa\u0107 znak\u00f3w <code>&lt;<\/code>oraz odpowiednio <code>&gt;<\/code>\u201e&lt;&#8221; i \u201e&gt;&#8221;. Teraz, je\u015bli sprawdzisz swoj\u0105 stron\u0119 internetow\u0105, powiniene\u015b zobaczy\u0107 kod PHP podobny do poni\u017cszego zrzut ekranu.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/04\/post-20630-608211641e7e9.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/04\/post-20630-608211641e7e9.png\" alt=\"PRISM \u2014 \u0142adnie wykonany pod\u015bwietlacz sk\u0142adni dla Twojej witryny\" ><\/a><\/p>\n<p>Do pisania kodu CSS musisz u\u017cy\u0107 class <code>language-css<\/code>.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/04\/post-20630-608211641e7e9.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/04\/post-20630-608211641e7e9.png\" alt=\"PRISM \u2014 \u0142adnie wykonany pod\u015bwietlacz sk\u0142adni dla Twojej witryny\" ><\/a><\/p>\n<p>Ten kod CSS b\u0119dzie wy\u015bwietlany w Twojej witrynie w nast\u0119puj\u0105cy spos\u00f3b:<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/04\/post-20630-608211641e7e9.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/04\/post-20630-608211641e7e9.png\" alt=\"PRISM \u2014 \u0142adnie wykonany pod\u015bwietlacz sk\u0142adni dla Twojej witryny\" ><\/a><\/p>\n<p>W ten sam spos\u00f3b dla sk\u0142adni HTML i JavaScript musisz u\u017cy\u0107 odpowiednio klas <code>language-markup<\/code>i <code>language-js<\/code>.<\/p>\n<p>Aby uzyska\u0107 list\u0119 obs\u0142ugiwanych j\u0119zyk\u00f3w i ich klas, <a href=\"https:\/\/prismjs.com\/index.html#supported-languages\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">kliknij<\/a> ten <a href=\"https:\/\/prismjs.com\/index.html#supported-languages\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">link<\/a>.<\/p>\n<h3>Wniosek<\/h3>\n<p>W tym artykule poka\u017cemy, jak zainstalowa\u0107 i u\u017cywa\u0107 pod\u015bwietlacza sk\u0142adni PRISM na swojej stronie internetowej. Dodaje \u0142adny wygl\u0105d sk\u0142adni kodu, co zapewnia lepsze wra\u017cenia u\u017cytkownika dla odwiedzaj\u0105cych. Alternatywnie mo\u017cesz r\u00f3wnie\u017c sprawdzi\u0107 wtyczk\u0119 WordPress <a href=\"https:\/\/wordpress.org\/plugins\/syntaxhighlighter\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">SyntaxHighlighter Evolved,<\/a> kt\u00f3rej u\u017cywamy na naszym blogu.<\/p>\n<h4>Powi\u0105zane artyku\u0142y<\/h4>\n<ul>\n<li><a href=\"https:\/\/themewp.inform.click\/pl\/jak-podzielic-terminal-w-systemie-operacyjnym-windows\/\" title=\"Jak podzieli\u0107 terminal w systemie operacyjnym Windows\">Jak podzieli\u0107 terminal w systemie operacyjnym Windows<\/a><\/li>\n<li><a href=\"https:\/\/themewp.inform.click\/pl\/rozszerzenie-ftp-sftp-dla-kodu-programu-visual-studio\/\" title=\"Rozszerzenie FTP\/SFTP dla kodu programu Visual Studio\">Rozszerzenie FTP\/SFTP dla kodu programu Visual Studio<\/a><\/li>\n<li><a href=\"https:\/\/themewp.inform.click\/pl\/jak-pobrac-wideo-z-youtube-w-systemie-operacyjnym-windows\/\" &quot;Jak wideo YouTube systemie operacyjnym br>&#8221; >Jak pobra\u0107 wideo z YouTube w systemie operacyjnym Windows<br \/><\/a><\/li>\n<\/ul>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">\u0179r\u00f3d\u0142o nagrywania:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/artisansweb.net\" class=\"external external_icon\">artisansweb.net<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>W tym artykule pokazujemy, jak zainstalowa\u0107 i u\u017cywa\u0107 pod\u015bwietlacza sk\u0142adni PRISM. Pod\u015bwietlenie sk\u0142adni kodu daje \u0142adny wygl\u0105d kodu i<\/p>\n","protected":false},"author":1,"featured_media":20631,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[416],"tags":[847],"class_list":["post-27668","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-roznorodny","tag-affiai-pl"],"_links":{"self":[{"href":"https:\/\/themewp.inform.click\/pl\/wp-json\/wp\/v2\/posts\/27668","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themewp.inform.click\/pl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themewp.inform.click\/pl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/pl\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/pl\/wp-json\/wp\/v2\/comments?post=27668"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/pl\/wp-json\/wp\/v2\/posts\/27668\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/pl\/wp-json\/wp\/v2\/media\/20631"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/pl\/wp-json\/wp\/v2\/media?parent=27668"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/pl\/wp-json\/wp\/v2\/categories?post=27668"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/pl\/wp-json\/wp\/v2\/tags?post=27668"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}