Khung chứa Code đơn giản nhưng đẹp cho blogger

By Unknown

Chủ Nhật, 9 tháng 11, 2014

Khung chứa Code như HTML, XML, PHP, CSS, JavaScript... là một phần không thể thiếu cho một blogger luôn chia sẻ thủ thuật, tiện ích blogspot thực thụ.

Khung chứa Code có tác dụng làm cho đọc giả dễ nhìn hơn, dễ copy code hơn ngoài ra nó củng có tác dụng chống tràn khung bài viết khi code quá dài. Thủ thuật này củng được viết khá nhiều nhưng mình viết lại cho những ai có nhu cầu dùng nó, mỗi người mỗi ý tưởng mà đúng không các bạn.

Khung chứa Code đơn giản nhưng đẹp cho blogger 

Để tiến hành làm khung chứa code cho blogger chúng ta cần một chút CSS và một chút Javascript để hoàn thành bài viết này.
Để chèn CSS và Javascript vào template của bạn trước tiên chúng ta đăng nhập vào tài khoản blogger của bạn sau đó chọn MẪU tiếp chọn CHỈNH SỬA HTML.
Ở phần CSS mình chia ra 2 màu tối và màu sáng để phù hợp với template của các bạn.

CSS khung chứa code màu sáng

/* Light theme */
pre {
margin:15px 15px 15px 0;
padding:10px;clear:both;
background:#f2f2f2;
color:#666;
border:1px solid #ddd;
overflow:auto;
font-family: "Consolas", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important;
font-weight: normal !important;
font-style: normal !important;
font-size: 12px !important;
}
code {
color:#126AAF;
font-family: "Consolas", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important;
font-weight: normal !important;
font-style: normal !important;
font-size: 13px !important;
}
code .token.punctuation {
  color:#83405A;
}
pre code .token.punctuation {
  color:#800000;
}
code .token.comment,
code .token.prolog,
code .token.doctype,
code .token.cdata {
  color:#008200;
}
code .namespace {
  opacity:.8;
}
code .token.property,
code .token.tag,
code .token.boolean,
code .token.number {
  color:#881280;
}
code .token.selector,
code .token.attr-name,
code .token.string {
  color:#986A7C;
}
pre code .token.selector,
pre code .token.attr-name,
pre code .token.string {
  color:#994500;
}
code .token.entity,
code .token.url,
pre .language-css .token.string,
pre .style .token.string {
  color:#994500;
}
code .token.operator {
  color:#878A85;
}
code .token.atrule,
code .token.attr-value {
  color:#48D30F;
}
pre code .token.atrule,
pre code .token.attr-value {
  color:#227BC0;
}
code .token.keyword {
  color:#881280;
  font-style:italic;
}
code .token.comment {
  font-style:italic;
}
code .token.regex {
  color:#B43D3D;
}
code .token.important {
  font-weight:bold;
}
code .token.entity {
  cursor:help;
}

CSS khung chứa code màu tối

/* Dark theme */
pre {
  padding:.5em 1em;
  margin:.5em 0;
  white-space:pre;
  word-wrap:normal;
  overflow:auto;
  background-color:#1B2426;
}
code {
  font-family:Consolas,Monaco,'Andale Mono','Courier New',Courier,Monospace;
  line-height:16px;
  color:#B43D3D;
  background-color:#eee;
  border:1px solid #ddd;
  padding:1px 2px;
}
pre code {
  display:block;
  background:none;
  border:none;
  color:#B9BDB6;
  direction:ltr;
  text-align:left;
  word-spacing:normal;
  padding:0 0;
}
code .token.punctuation {
  color:#83405A;
}
pre code .token.punctuation {
  color:#B9BDB6;
}

code .token.comment,
code .token.prolog,
code .token.doctype,
code .token.cdata {
  color:#435A4D;
}
code .namespace {
  opacity:.8;
}
code .token.property,
code .token.tag,
code .token.boolean,
code .token.number {
  color:#5BA1CF;
}

code .token.selector,
code .token.attr-name,
code .token.string {
  color:#986A7C;
}
pre code .token.selector,
pre code .token.attr-name,
pre code .token.string {
  color:#E0E8FF;
}
code .token.entity,
code .token.url,
pre .language-css .token.string,
pre .style .token.string {
  color:#E0E8FF;
}
code .token.operator {
  color:#878A85;
}
code .token.atrule,
code .token.attr-value {
  color:#48D30F;
}

pre code .token.atrule,
pre code .token.attr-value {
  color:#48E638;
}
code .token.keyword {
  color:#47A1CF;
  font-style:italic;
}
code .token.comment {
  font-style:italic;
}
code .token.regex {
  color:#B43D3D;
}
code .token.important {
  font-weight:bold;
}
code .token.entity {
  cursor:help;
}

Các bạn chọn một trong hai màu sao cho phù hợp với template của mình sau đó thêm nó lên trên thẻ ]]></skin>
Sau khi thêm CSS xong các bạn thêm đoạn Javascript lên trên thẻ </body>

<script type="text/javascript" src='https://dl.dropboxusercontent.com/u/184079020/prism.js'></script>

Các bạn lưu lại thế chúng ta đả hoàn thành thêm code trong template rồi nhé .

Còn ở phần đăng bài ta cần một hàm HTML để hoàn thành thủ tục khung chưa code cho blogger này nhé.

Chúng ta quy định

1. HTML, XML, PHP là language-markup
2. CSS là language-css
3. JavaScript là language-javascript

Đoạn HTML khung chứa code

<pre><code class="language-markup"> ... CODE ... </code></pre>

<pre><code class="language-css"> ... CODE ... </code></pre>

<pre><code class="language-javascript"> ...CODE ... </code></pre>

Vi dụ:

<pre><code class="language-css">code .token.important {
font-weight:bold;
}</code></pre>

Video hướng dẫn

DEMO

Khi đăng bài chúng ta nhơ chuyển sang chế độ HTML nhé. Vậy là chúng ta đả hoàn thành xong khung chưa code tuy đơn giản nhưng đẹp rồi nhé. Chúc các bạn thành công !

Tag : CSS, Javascript