Nói sơ qua một chút như sau. Thông thường khi viết code có thể đơn giản dùng tag blockquote được hỗ trợ sẵn <blockquote></blockquote> và post source vào đó. Tuy nhiên source sẽ không được highlight syntax và sẽ khó đọc 1 chút. Hay vẫn có thể dùng http://hilite.me/ như trước đây. Nhưng nói chung là vẫn cảm thấy không được tốt lắm.
Một cách khác là embbeded gist trên Github. Có thể tham khảo tại đây
Embedding Github code into your Blogger blog
SyntaxHighlighter là một các embedded trực tiếp dùng Javascript, có thể download và dùng dễ dàng với bất kỳ website nào, không loại trừ Blogger/Blogspot. Nó giống như dạng MathJax.
Cơ bản như sau:
1. Download và put tại host/web server
2. Thực hiện theo các bước hướng dẫn tại http://alexgorbatchev.com/SyntaxHighlighter/manual/installation.html
3. Dùng config và brush alias tương ứng với language của source code http://alexgorbatchev.com/SyntaxHighlighter/manual/configuration/
Với Blogger/Blogspot, vào Template
1. Để chắc ăn thực hiện backup Template » Backup/Restore » Download template
2. Vào Edit HTML, trong tag <head> thực hiện include CSS, Javascript và init code cần thiết tùy theo version với link bắt đầu http://alexgorbatchev.com/pub/sh/. Version hiện tại là
3.0.83 ngày 2016/12/24. Hay có thể dùng CDN https://cdnjs.com/libraries/SyntaxHighlighter (Blogger dùng với https). Có thể dùng theme default, Eclipse hay midnight. Include các brush thông dụng như C++, Java, C#, Scala, Python, CSS, SQL, XML... Thực hiện config Blogger mode bật ON. Save và kiểm tra có lỗi Javascript hay không.
3. Thực hiện test bằng cách đơn giản nhất là dùng tag <pre>, tất nhiên là phải chuyển qua HTML code, xong copy source từ source file hay IDE hay text editor như Notepad++ qua. Nên bật ruler và tắt toolbar.
Set defaults như sau:
SyntaxHighlighter.defaults['tab-size'] = 4; SyntaxHighlighter.defaults['toolbar'] = false;
Ngay sau khi gọi SyntaxHighlighter.all()
<pre class="brush: csharp; toolbar: false;">
using namespace System;
namespace Demo
{
public class Pet
{
public string Name { get; set; }
public Pet()
{
}
}
}
</pre>
Kết quả như sau:
using namespace System;
namespace Demo
{
public class Pet
{
public string Name { get; set; }
public Pet()
{
}
}
}
Cách thứ 2 là để trong tag script và bắt buộc có CDATA
<script type="syntaxhighlighter" class="brush: js"><![CDATA[
/**
* SyntaxHighlighter
*/
function foo()
{
if (counter <= 10) {
return;
}
// it works!
}
]]></script>
Dùng first-line để chỉ định line number đầu tiên trên ruler và highlight dùng chỉ định highlight line number nào. Ví dụ:
<pre class="brush: php; toolbar: false; auto-links: false; first-line: 10; highlight: [11, 13]">
/**
* https://github.com/syntaxhighlighter
*/
echo("https://github.com/syntaxhighlighter");
</pre>
Kết quả sẽ là
/**
* https://github.com/syntaxhighlighter
*/
echo("https://github.com/syntaxhighlighter");
No comments:
Post a Comment