Modifikasi pre syntax simple keren ~ Terpesona

Dalam artikel saya yang ke 2 mencoba posting tentang pre syntax dimana tutorial ini untuk sobat yang suka dengan berbagi script, baik CSS, HTML, JavaScript atau kode lainya dan seperti yang sobat lihat pada artikel yang membagikan script tersebut pasti diantaranya yang memakai pre syntax itu dan pada artikel kali ini saya akan berbagi sebuah script pre syntax dengan modifikasi yang simple dan keren berminat simak yu?

Script pre syntax banyak di bilang cukup banyak dan katanya membuat loading blog jadi terhambat itu bagaimana cara kita memasang nya, tapi jika anda ingin memakai pre syntax yang ramah dengan loading blog tidak ada salahnya coba pakai script yang ini, dan tampilanya gak kalah keren dengan syntax yang lain

Cara memasang pre syntax :

Pastikan anda masuk dasboard blog anda dan masuk template dan klik edite template, cari kode ]]></b:skin> atau </style> kemudian copy kode di bawah ini dan paste tepat di atas kode ]]></b:skin> atau </style> berikut di bawah ini Kode Css yang harus anda copy :

 /*Pre*/
pre,i[rel="pre"]{display:block;padding:5px .5em 5px 1em;font:normal normal 12px/15px "Inconsolata","Monaco","Consolas","Andale Mono","Bitstream Vera Sans Mono","Courier New",Courier,monospace;border:2px solid #c5d0e3;position:relative;overflow:auto;word-wrap:normal;white-space:pre;-webkit-user-select:text;-moz-user-select:-moz-text;-moz-user-select:text;-khtml-user-select:text;-ms-user-select:text;user-select:text;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out;}
pre:hover,i[rel="pre"]:hover {background-color: #e6e9f1;}
pre code{display:block;color:#111;margin-top:3px;font:normal normal 12px/15px "Inconsolata","Monaco","Consolas","Andale Mono","Bitstream Vera Sans Mono","Courier New",Courier,monospace;letter-spacing:0;white-space:pre;overflow:auto;}
pre[rel="HTML"],pre[data-codetype="HTML"]{border-color:#4584BE;}
pre[rel="CSS"],pre[data-codetype="CSS"]{border-color:#5DA028;}
pre[rel="JavaScript"],pre[data-codetype="JavaScript"]{border-color:#545448;}
pre[rel="JQuery"],pre[data-codetype="JQuery"]{border-color:#7073CF;}
pre[rel="JQuery UI"],pre[data-codetype="JQuery UI"]{border-color:#E36B23;}
pre[rel="XML"],pre[data-codetype="XML"]{border-color:#C44032;}
pre[rel="PHP"],pre[data-codetype="PHP"]{border-color:#FF9900;}
pre[rel*="+"],pre[data-codetype*="+"]{border-color:#0B7E88;}
pre .comments,pre .template_comment,pre .diff .header,pre .doctype,pre .lisp .string,pre .javadoc{color:#00BB4B;font-style:italic;}
pre .keyword,pre .css .rule .keyword,pre pre .winutils,pre .javascript .title,pre .method,pre .addition,pre .css .tag,pre .lisp .title{color:#859900;}
pre .number,pre .command,pre .string,pre .tag .value,pre .phpdoc,pre .tex .formula,pre .regexp,pre .hexcolor{color:#9B0909}
pre .title,pre .localvars,pre .function .title,pre .chunk,pre .decorator,pre .builtin,pre .built_in,pre .lisp .title,pre .identifier,pre .title .keymethods,pre .id{color:#103197;}
pre .tag .title,pre .rules .property,pre .django .tag .keyword{font-weight:bold;}
pre .attribute,pre .variable,pre .instancevar,pre .lisp .body,pre .smalltalk .number,pre .constant,pre .class .title,pre .parent,pre .haskell .label{color:#0499D3;}
pre .preprocessor,pre .pi,pre .shebang,pre .symbol,pre .diff .change,pre .special,pre .keymethods,pre .attr_selector,pre .important,pre .subst,pre .cdata{color:#cb4b16;}
pre .deletion{color:#dc322f;}
pre .tex .formula{background:#073642;}
pre.numbered{border-left-width:2px;}
pre .line-number,pre.numbered code{display:block;line-height:16px;}
pre .line-number{float:left;margin:0 1em 0 -1em;color:#586E75;border-right:2px solid #c5d0e3;text-align:right;min-width:35px;}
pre .line-number span{display:block;position:relative;padding:0 .5em 0 1em;}
pre .line-number span:nth-child(even){background-color:#FAFAFA;}
pre .line-number span em{position:absolute;bottom:-1px;left:100%;background-color:orange;padding:0 2px 1px 2px;border:1px solid black;font-style:normal;color:black;display:none;}
pre .line-number span:hover em{display:block;}
pre .line-number span:target a{display:block;color:white;position:relative;background-color:#268bd2;margin:0 -.5em 0 -1em;padding:0 .5em 0 0;}
pre.numbered code span{line-height:12px;}
pre[data-codetype="HTML"] .line-number span:target a{background-color:#4584BE;}
pre[data-codetype="CSS"] .line-number span:target a{background-color:#5DA028;}
pre[data-codetype="JavaScript"] .line-number span:target a{background-color:#bbbbbb;}
pre[data-codetype="JQuery"] .line-number span:target a{background-color:#7073CF;}
pre[data-codetype="JQuery UI"] .line-number span:target a{background-color:#E36B23;}
pre[data-codetype="XML"] .line-number span:target a{background-color:#C44032;}
pre[data-codetype="PHP"] .line-number span:target a{background-color:#FF9900;}
pre[data-codetype*="+"] .line-number span:target a{background-color:#B58900;}
pre code mark {background: white;}
pre[data-codetype]:before {content:attr(data-codetype);display:block;position:static;top:0;right:0;left:0;background-color:#666;padding:0 7px;margin:0 -3px;font:bold 11px/20px Arial,Sans-Serif;color:white;}
pre[data-codetype="HTML"]:before {background-color:#4584BE;}
pre[data-codetype="CSS"]:before {background-color:#5DA028;}
pre[data-codetype="JavaScript"]:before {background-color:#545448;}
pre[data-codetype="JQuery"]:before {background-color:#7073CF;}
pre[data-codetype="JQuery UI"]:before {background-color:#E36B23;}
pre[data-codetype="PHP"]:before {background-color:#FF9900;}
pre[data-codetype="XML"]:before {background-color:#C44032;}
pre[data-codetype*="+"]:before {background-color:#0B7E88;}
code,pre{padding:0 3px 2px;font-family:Monaco, Menlo, Consolas, "Courier New", monospace;font-size:12px;color:#333333;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}
code,i[rel="code"]{overflow:auto;max-height:200px;padding:2px 4px;color:#d14;white-space:nowrap;background-color:#f7f7f9;border:1px solid #e1e1e8;-webkit-user-select:text;-moz-user-select:-moz-text;-moz-user-select:text;-khtml-user-select:text;-ms-user-select:text;user-select:text;}
i[rel="code"]{display:block;}

Enter your email address to get update from Karrysta. Print PDF

Modifikasi pre syntax simple keren

Unknown Tutorial Blogger 23.18 1 comment

1 komentar: