{"id":27846,"date":"2021-05-13T12:07:00","date_gmt":"2021-05-13T09:07:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=27846"},"modified":"2021-10-17T05:00:45","modified_gmt":"2021-10-17T02:00:45","slug":"prism-en-snyggt-klar-syntaxmarkering-for-din-webbplats","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/sv\/prism-en-snyggt-klar-syntaxmarkering-for-din-webbplats\/","title":{"rendered":"PRISM – En snyggt klar syntaxmarkering f\u00f6r din webbplats"},"content":{"rendered":"

Om du driver en programmeringsblogg eller webbplats som f\u00f6rklarar hur du kodar m\u00e5ste du visa kod p\u00e5 dina webbsidor. Dina bes\u00f6kare \u00e4r uppm\u00e4rksamma p\u00e5 din skrivna kod och l\u00e4r dig av den. P\u00e5 grund av detta b\u00f6r du visa din kod snyggt p\u00e5 din webbplats vilket hj\u00e4lper dina anv\u00e4ndare att enkelt l\u00e4sa den. Det ger ocks\u00e5 en b\u00e4ttre anv\u00e4ndarupplevelse f\u00f6r dina webbplatsbes\u00f6kare.<\/p>\n

P\u00e5 den h\u00e4r bloggen anv\u00e4nder vi ett WordPress-plugin SyntaxHighlighter Evolved<\/a> f\u00f6r att markera kodesyntaxen. I den h\u00e4r artikeln diskuterar vi dock inte om detta WordPress-plugin. Ist\u00e4llet vill vi f\u00e4sta v\u00e5ra bes\u00f6kare uppm\u00e4rksamhet p\u00e5 PRISM,<\/a> som \u00e4r en mycket anv\u00e4nd syntaxmarkering p\u00e5 tusentals webbplatser.<\/p>\n

De mest popul\u00e4ra bloggarna som anv\u00e4nder PRISM \u00e4r Smashing Magazine, CSS-TRICKS, SitePoint. Om du letar efter l\u00f6sningen p\u00e5 hur du anv\u00e4nder syntaxmarkering, l\u00e4s vidare.<\/p>\n

Installation<\/h3>\n

F\u00f6r att kunna anv\u00e4nda PRISM-kodmarkeringen m\u00e5ste du inkludera deras JS och CSS p\u00e5 din webbplats. PRISM l\u00e5ter dig anpassa dina val p\u00e5 tema- och spr\u00e5kval. G\u00e5 \u00f6ver till PRISM-hemsidan<\/a> och klicka p\u00e5 knappen Ladda ner.<\/p>\n

\"PRISM<\/a><\/p>\n

P\u00e5 n\u00e4sta sida v\u00e4ljer du temat som passar din webbplats. V\u00e4lj de spr\u00e5k som din webbplats l\u00e4r om under avsnittet Spr\u00e5k. H\u00e4r rekommenderar vi att du endast v\u00e4ljer de spr\u00e5k som kr\u00e4vs. Annars kommer dina PRISMs JS- och CSS-filer att ta upp on\u00f6digt utrymme.<\/p>\n

N\u00e4r du har valt dina alternativ, bl\u00e4ddra ner till botten och ladda ner dina anpassade JS- och CSS-filer separat.<\/p>\n

\"PRISM<\/a><\/p>\n

Hur man anv\u00e4nder Syntax Highlighter<\/h3>\n

Vi har laddat ner JS- och CSS-filer som markerar v\u00e5r kodsyntax. N\u00e4sta sak m\u00e5ste ses \u00e4r hur man anv\u00e4nder den i din faktiska kod n\u00e4r den visas p\u00e5 webbsidor.<\/p>\n

F\u00f6rst m\u00e5ste du inkludera dessa nedladdade filer p\u00e5 din webbplats.<\/p>\n

<!DOCTYPE html>\n<html>\n<head>\n\u00a0\u00a0\u00a0\u00a0...\n\u00a0\u00a0\u00a0\u00a0<link href=\"css\/prism.css\" rel=\"stylesheet\" \/>\n<\/head>\n<body>\n\u00a0\u00a0\u00a0\u00a0...\n\u00a0\u00a0\u00a0\u00a0<script src=\"js\/prism.js\"><\/script>\n<\/body>\n<\/html><\/code><\/pre>\n
D\u00e4refter ger PRISM en unik klass f\u00f6r varje spr\u00e5k som st\u00f6ds som vi m\u00e5ste anv\u00e4nda n\u00e4r vi l\u00e4gger till spr\u00e5ksyntax. Om du till exempel skriver en PHP-kod ska du sl\u00e5 in din PHP-kod p\u00e5 f\u00f6ljande s\u00e4tt.<\/p>\n
\"PRISM<\/a><\/p>\n
L\u00e4gg m\u00e4rke till att vi har anv\u00e4nt "<? Php" ist\u00e4llet f\u00f6r "<? Php". N\u00e4r du anv\u00e4nder PRISM m\u00e5ste du anv\u00e4nda tecken <<\/code>och ><\/code>f\u00f6r ’<’ respektive ’>’. Om du nu kontrollerar din webbsida ska du se din PHP-kod ungef\u00e4r som nedan sk\u00e4rmdump.<\/p>\n
\"PRISM<\/a><\/p>\n
F\u00f6r att skriva en CSS-kod m\u00e5ste du anv\u00e4nda klass language-css<\/code>.<\/p>\n
\"PRISM<\/a><\/p>\n
Denna CSS-kod visas p\u00e5 din webbplats enligt f\u00f6ljande:<\/p>\n
\"PRISM<\/a><\/p>\n
P\u00e5 samma s\u00e4tt f\u00f6r HTML och JavaScript syntax du beh\u00f6ver anv\u00e4nda klasser language-markup<\/code>och language-js<\/code>respektive.<\/p>\n
F\u00f6r att f\u00e5 en lista \u00f6ver spr\u00e5k som st\u00f6ds och deras klasser, kolla in den h\u00e4r l\u00e4nken<\/a>.<\/p>\n
Slutsats<\/h3>\n
I den h\u00e4r artikeln visar vi dig hur du installerar och anv\u00e4nder PRISM-syntaxmarkering p\u00e5 din webbplats. Det l\u00e4gger till en snygg look f\u00f6r din kodsyntax som ger en b\u00e4ttre anv\u00e4ndarupplevelse f\u00f6r dina bes\u00f6kare. Alternativt kan du ocks\u00e5 kolla WordPress-plugin SyntaxHighlighter Evolved<\/a> som vi anv\u00e4nder p\u00e5 v\u00e5r blogg.<\/p>\n
relaterade artiklar<\/h4>\n