{"id":24153,"date":"2021-05-13T12:00:00","date_gmt":"2021-05-13T09:00:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=24153"},"modified":"2021-10-17T21:02:30","modified_gmt":"2021-10-17T18:02:30","slug":"prism-hienosti-tehty-syntaksin-korostustyokalu-verkkosivustollesi","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/fi\/prism-hienosti-tehty-syntaksin-korostustyokalu-verkkosivustollesi\/","title":{"rendered":"PRISM &#8211; hienosti tehty syntaksin korostusty\u00f6kalu verkkosivustollesi"},"content":{"rendered":"<p>Jos sinulla on ohjelmointiblogi tai verkkosivusto, joka selitt\u00e4\u00e4 koodaamisen, sinun on n\u00e4ytett\u00e4v\u00e4 koodi verkkosivuillasi. Vierailijat kiinnitt\u00e4v\u00e4t huomiota kirjoitettuun koodiin ja oppivat siit\u00e4. T\u00e4m\u00e4n vuoksi sinun tulisi n\u00e4ytt\u00e4\u00e4 koodi hienosti verkkosivustollasi, mik\u00e4 auttaa k\u00e4ytt\u00e4ji\u00e4 lukemaan sen helposti. Se antaa my\u00f6s paremman k\u00e4ytt\u00f6kokemuksen sivustosi k\u00e4vij\u00f6ille.<\/p>\n<p>T\u00e4ss\u00e4 blogissa k\u00e4yt\u00e4mme WordPress-laajennusta <a href=\"https:\/\/wordpress.org\/plugins\/syntaxhighlighter\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">SyntaxHighlighter Evolved koodisyntaksin<\/a> korostamiseksi. T\u00e4ss\u00e4 artikkelissa emme kuitenkaan keskustele t\u00e4st\u00e4 WordPress-laajennuksesta. Sen sijaan haluaisimme tuoda k\u00e4vij\u00f6idemme huomion <a href=\"https:\/\/prismjs.com\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">PRISM: \u00e4\u00e4n,<\/a> joka on laajalti k\u00e4ytetty syntaksin korostustuote tuhansilla verkkosivustoilla.<\/p>\n<p>Suosituimmat PRISMi\u00e4 k\u00e4ytt\u00e4v\u00e4t blogit ovat Smashing Magazine, CSS-TRICKS, SitePoint. Jos etsit ratkaisua syntaksikorostimen k\u00e4ytt\u00f6\u00f6n, lue sitten.<\/p>\n<h3>Asennus<\/h3>\n<p>Jotta voisit k\u00e4ytt\u00e4\u00e4 PRISM-koodikirjoitinta, sinun on sis\u00e4llytett\u00e4v\u00e4 heid\u00e4n JS ja CSS verkkosivustoosi. PRISM: n avulla voit mukauttaa teeman ja kielen valintoja. Siirry <a href=\"https:\/\/prismjs.com\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">PRISM-kotisivulle<\/a> ja napsauta Lataa-painiketta.<\/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 - hienosti tehty syntaksin korostusty\u00f6kalu verkkosivustollesi\" ><\/a><\/p>\n<p>Valitse seuraavalla sivulla teema siit\u00e4, mik\u00e4 sopii verkkosivustollesi. Valitse Kielet-osiossa kielet, joista verkkosivustosi opettaa. T\u00e4ss\u00e4 suosittelemme valitsemaan vain vaaditut kielet. Muuten PRISM: n JS- ja CSS-tiedostot viev\u00e4t tarpeetonta tilaa.<\/p>\n<p>Kun olet valinnut vaihtoehdot, vierit\u00e4 alasp\u00e4in ja lataa mukautetut JS- ja CSS-tiedostosi erikseen.<\/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 - hienosti tehty syntaksin korostusty\u00f6kalu verkkosivustollesi\" ><\/a><\/p>\n<h3>Kuinka k\u00e4ytt\u00e4\u00e4 Syntax Highlighteria<\/h3>\n<p>Olemme ladanneet JS- ja CSS-tiedostot, jotka korostavat koodisyntaksiamme. Seuraava asia on n\u00e4hd\u00e4, miten sit\u00e4 k\u00e4ytet\u00e4\u00e4n todellisessa koodissasi n\u00e4ytett\u00e4ess\u00e4 verkkosivuilla.<\/p>\n<p>Aluksi sinun on sis\u00e4llytett\u00e4v\u00e4 n\u00e4m\u00e4 ladatut tiedostot verkkosivustollesi.<\/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>Seuraavaksi PRISM tarjoaa ainutlaatuisen luokan jokaiselle tuetulle kielelle, jota meid\u00e4n on k\u00e4ytett\u00e4v\u00e4 lis\u00e4\u00e4m\u00e4ll\u00e4 kielen syntaksia. Esimerkiksi, jos kirjoitat PHP-koodia, sinun on k\u00e4\u00e4ritt\u00e4v\u00e4 PHP-koodi seuraavalla tavalla.<\/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 - hienosti tehty syntaksin korostusty\u00f6kalu verkkosivustollesi\" ><\/a><\/p>\n<p>Huomaa, ett\u00e4 olemme k\u00e4ytt\u00e4neet &quot;&lt;? Php&quot;: t\u00e4 &quot;&lt;? Php&quot;: n sijaan. Kun k\u00e4yt\u00e4t PRISMi\u00e4, sinun on k\u00e4ytett\u00e4v\u00e4 merkkej\u00e4 <code>&lt;<\/code>ja merkkej\u00e4 <code>&gt;<\/code>&quot;&lt;&quot; ja &quot;&gt;&quot;. Jos nyt tarkistat verkkosivusi, sinun pit\u00e4isi n\u00e4hd\u00e4 PHP-koodisi jotain alla olevaa kuvakaappaus.<\/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 - hienosti tehty syntaksin korostusty\u00f6kalu verkkosivustollesi\" ><\/a><\/p>\n<p>CSS-koodin kirjoittamiseen on k\u00e4ytett\u00e4v\u00e4 luokkaa <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 - hienosti tehty syntaksin korostusty\u00f6kalu verkkosivustollesi\" ><\/a><\/p>\n<p>T\u00e4m\u00e4 CSS-koodi n\u00e4kyy verkkosivustollasi seuraavasti:<\/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 - hienosti tehty syntaksin korostusty\u00f6kalu verkkosivustollesi\" ><\/a><\/p>\n<p>Samoin HTML ja JavaScript lauseenrakenteen joudut k\u00e4ytt\u00e4m\u00e4\u00e4n luokkia <code>language-markup<\/code>ja <code>language-js<\/code>vastaavasti.<\/p>\n<p>Katso t\u00e4m\u00e4 <a href=\"https:\/\/prismjs.com\/index.html#supported-languages\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">linkki<\/a> saadaksesi luettelon tuetuista kielist\u00e4 ja heid\u00e4n luokistaan .<\/p>\n<h3>Johtop\u00e4\u00e4t\u00f6s<\/h3>\n<p>T\u00e4ss\u00e4 artikkelissa n\u00e4yt\u00e4mme, kuinka voit asentaa ja k\u00e4ytt\u00e4\u00e4 PRISM-syntaksin korostuskyky\u00e4 verkkosivustollasi. Se lis\u00e4\u00e4 mukavan ilmeen koodisyntaksillesi, mik\u00e4 antaa vierailijoille paremman k\u00e4ytt\u00f6kokemuksen. Vaihtoehtoisesti voit my\u00f6s tarkistaa WordPress-laajennuksen <a href=\"https:\/\/wordpress.org\/plugins\/syntaxhighlighter\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">SyntaxHighlighter Evolved,<\/a> jota k\u00e4yt\u00e4mme blogissamme.<\/p>\n<h4>Aiheeseen liittyv\u00e4t artikkelit<\/h4>\n<ul>\n<li><a href=\"https:\/\/themewp.inform.click\/fi\/kuinka-jakaa-paate-windows-kayttojarjestelmassa\/\" title=\"Kuinka jakaa p\u00e4\u00e4te Windows-k\u00e4ytt\u00f6j\u00e4rjestelm\u00e4ss\u00e4\">Kuinka jakaa p\u00e4\u00e4te Windows-k\u00e4ytt\u00f6j\u00e4rjestelm\u00e4ss\u00e4<\/a><\/li>\n<li><a href=\"https:\/\/themewp.inform.click\/fi\/ftp-sftp-laajennus-visual-studio-koodille\/\" title=\"FTP \/ SFTP-laajennus Visual Studio -koodille\">FTP \/ SFTP-laajennus Visual Studio -koodille<\/a><\/li>\n<li><a href=\"https:\/\/themewp.inform.click\/fi\/kuinka-ladata-video-youtubesta-windows-kayttojarjestelmassa\/\" &quot;Kuinka ladata video YouTubesta br>&#8221; >Kuinka ladata video YouTubesta Windows-k\u00e4ytt\u00f6j\u00e4rjestelm\u00e4ss\u00e4<br \/><\/a><\/li>\n<\/ul>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/artisansweb.net\" class=\"external external_icon\">artisansweb.net<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>T\u00e4ss\u00e4 artikkelissa n\u00e4yt\u00e4mme, kuinka PRISM-syntaksikorostin asennetaan ja k\u00e4ytet\u00e4\u00e4n. Kun korostat koodisyntaksiasi, se antaa mukavan ilmeen koodillesi ja<\/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":[414],"tags":[843],"class_list":["post-24153","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-sekalaisia","tag-affiai-fi"],"_links":{"self":[{"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/posts\/24153","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/comments?post=24153"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/posts\/24153\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/media\/20631"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/media?parent=24153"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/categories?post=24153"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/tags?post=24153"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}