diff --git a/.gitignore b/.gitignore
index 7fc9c4271..c4dc77336 100644
--- a/.gitignore
+++ b/.gitignore
@@ -14,3 +14,5 @@ core/src/main/resources/com/taobao/arthas/core/res/version
 
 site/src/site/sphinx/_build
 site/src/site/sphinx/en/_build
+
+**/__pycache__
diff --git a/site/src/site/sphinx/_extensions/highlightjs.py b/site/src/site/sphinx/_extensions/highlightjs.py
new file mode 100755
index 000000000..3a35c748e
--- /dev/null
+++ b/site/src/site/sphinx/_extensions/highlightjs.py
@@ -0,0 +1,69 @@
+import html
+
+from docutils import nodes
+from pygments.formatters.html import HtmlFormatter
+from six import text_type
+from sphinx.pygments_styles import NoneStyle
+from sphinx.writers.html import HTMLTranslator
+
+
+# Applies syntax highlighting to a literal block if it has a class 'highlight-<language>'.
+def parsed_literal_visit_literal_block(self, node, next_visitor):
+    classes = node.get('classes', [])
+    lang = ''
+    for c in classes:
+        if c.startswith('highlight-'):
+            lang = c[10:].strip()
+            break
+
+    if len(lang) == 0:
+        return next_visitor(self, node)
+
+    def warner(msg):
+        self.builder.warn(msg, (self.builder.current_docname, node.line))
+
+    self.body.append(self.highlighter.highlight_block(node.astext(), lang, warn=warner))
+
+    raise nodes.SkipNode
+
+
+class HljsHighlighter(object):
+
+    def __init__(self, dest='html', stylename='', trim_doctest_flags=False):
+        self.dest = dest
+        self.trim_doctest_flags = trim_doctest_flags
+        self.formatter_args = {'style': NoneStyle}
+        self.formatter = HtmlFormatter
+
+    def get_formatter(self, **kwargs):
+        return self.formatter
+
+    def unhighlighted(self, source):
+        return '<pre>' + html.escape(source) + '</pre>\n'
+
+    def highlight_block(self, source, lang, opts=None, location=None, force=False, **kwargs):
+        if not isinstance(source, text_type):
+            source = source.decode()
+
+        if lang != None and lang != 'default':
+            return '<div class="highlight hljs"><pre class="' + lang + '">' + html.escape(source) + '</pre></div>\n'
+        else:
+            return '<pre class="literal-block">' + html.escape(source) + '</pre>\n'
+
+    def get_stylesheet(self):
+        return ''
+
+
+def override_highlighter(app):
+    if app.builder.name == 'html':
+        app.builder.highlighter = HljsHighlighter()
+
+
+def setup(app):
+    app.connect('builder-inited', override_highlighter)
+
+    # Intercept the rendering of HTML literals.
+    old_visitor = HTMLTranslator.visit_literal_block
+    HTMLTranslator.visit_literal_block = lambda self, node: parsed_literal_visit_literal_block(self, node, old_visitor)
+
+    pass
diff --git a/site/src/site/sphinx/_static/overrides.css b/site/src/site/sphinx/_static/overrides.css
index 3de902187..d07c1a2e9 100644
--- a/site/src/site/sphinx/_static/overrides.css
+++ b/site/src/site/sphinx/_static/overrides.css
@@ -54,8 +54,8 @@ html, body, .wy-grid-for-nav {
   padding: 0;
 }
 
-.wy-menu.wy-menu-vertical .slack-invitation,
-.wy-menu.wy-menu-vertical .project-badges {
+.wy-menu .slack-invitation,
+.wy-menu .project-badges {
   padding: 0.4em 1.45em 0 1.45em;
   display: block;
   position: relative;
@@ -84,7 +84,7 @@ html, body, .wy-grid-for-nav {
   }
 }
 
-/* Move the right-side breadcrumb a little bit left so that it does not overlap with the Github fork ribbom. */
+/* Move the right-side breadcrumb a little bit left so that it does not overlap with the Github fork ribbon. */
 @media screen and (min-width: 769px) {
   .wy-breadcrumbs-aside {
     padding-right: 64px;
@@ -123,7 +123,7 @@ pre,
 .rst-content div[class*='highlight'] pre,
 .rst-content pre.literal-block {
   padding: 8px 12px 12px 12px;
-  font-size: 90%;
+  font-size: inherit;
   overflow-x: auto;
   overflow-y: hidden;
   color: inherit;
@@ -151,11 +151,13 @@ code.literal, .rst-content code.literal {
   white-space: pre-wrap;
 }
 
-/* Literals in vertical menu */
-.wy-menu-vertical li tt,
-.wy-menu-vertical li code {
+/* Literals in menu */
+.wy-menu tt,
+.wy-menu code {
   padding-left: 0;
   padding-right: 0;
+  background: inherit;
+  border-radius: 0;
   font-size: inherit;
   color: inherit;
   border: none;
@@ -166,26 +168,34 @@ code.literal, .rst-content code.literal {
 code::before, code::after,
 kbd::before, kbd::after,
 var::before, var::after,
-samp::before, samp::after {
+samp::before, samp::after,
+tt::before, tt::after {
   letter-spacing: -0.3em;
   content: "\00a0";
 }
 
-/* Do not add small padding around a literal in vertical menu. */
-.wy-menu-vertical li tt::before,
-.wy-menu-vertical li tt::after,
-.wy-menu-vertical li code::before,
-.wy-menu-vertical li code::after {
+/* Do not add small padding around a literal in menu. */
+.wy-menu tt::before,
+.wy-menu tt::after,
+.wy-menu code::before,
+.wy-menu code::after {
   content: "";
 }
 
+/* Do not add color to the literals in a hyperlink. */
+a .highlight * {
+  color: inherit !important;
+}
+
 h1, h2, h3, h4, h5, h6 {
   font-family: 'Source Sans Pro', 'Helvetica', 'Arial', sans-serif;
 }
 
-/* Use justify-align with hyphenation */
+/* Use justify-align and hyphenation. */
 p, .rst-content li {
   text-align: justify;
+}
+p, .rst-content li, .wy-menu li {
   word-wrap: break-word;
   overflow-wrap: break-word;
   hyphens: auto;
@@ -248,3 +258,64 @@ p, .rst-content li {
 .plantuml {
   text-align: center;
 }
+
+/* Plural suffix inside code should not be monospaced. */
+code .plural-suffix {
+  font-family: 'Source Sans Pro', 'Helvetica', 'Arial', sans-serif;
+}
+
+/* highlightjs style begins */
+div.hljs {
+  background: inherit;
+  padding: 0;
+}
+pre.hljs {
+  background: rgba(0, 0, 0, 0.01); /* 1% darker background */
+}
+td.hljs-ln-numbers, td.hljs-ln-code {
+  line-height: 1.067em;
+}
+td.hljs-ln-numbers {
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+
+  text-align: right;
+  color: #ccc;
+  border-right: 1px solid #CCC;
+  vertical-align: top;
+  padding-right: 8px !important;
+}
+td.hljs-ln-code {
+  padding-left: 8px !important;
+}
+/* highlightjs style ends */
+
+/* branding begins. */
+.wy-nav-top, .wy-side-nav-search {
+  background-color: #3a3a3a;
+}
+
+.wy-side-nav-search input[type="text"] {
+  border-color: #3a3a3a;
+}
+
+.wy-nav-side {
+  background-color: #f8f8f8;
+}
+
+.wy-menu a {
+  color: #666666;
+}
+
+.wy-menu a:active, .wy-menu a:hover {
+  background-color: #d6d6d6;
+}
+
+.wy-menu li.current a {
+  border-right-width: 0px;
+}
+/* branding ends. */
diff --git a/site/src/site/sphinx/_templates/layout.html b/site/src/site/sphinx/_templates/layout.html
index 497158453..6c6957f9d 100644
--- a/site/src/site/sphinx/_templates/layout.html
+++ b/site/src/site/sphinx/_templates/layout.html
@@ -3,6 +3,7 @@
 {% set extra_css_files = ['_static/overrides.css'] %}
 {% block extrahead %}
 <script src="{{ pathto('_static/center_page.js', 1) }}"></script>
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/github.min.css">
 {{ super() }}
 {% endblock %}
 {% block footer %}
@@ -14,6 +15,15 @@
 
 <script type="text/javascript" src="{{ pathto('_static/add_badges.js', 1) }}"></script>
 
+<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/highlight.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/highlightjs-line-numbers.js/2.5.0/highlightjs-line-numbers.min.js"></script>
+<script>
+  document.querySelectorAll('div.hljs > pre').forEach(function(block) {
+    hljs.highlightBlock(block);
+    hljs.lineNumbersBlock(block);
+  });
+</script>
+
 <script>
   var _hmt = _hmt || [];
   (function() {
diff --git a/site/src/site/sphinx/conf.py b/site/src/site/sphinx/conf.py
index bac1c7e03..e0260c455 100644
--- a/site/src/site/sphinx/conf.py
+++ b/site/src/site/sphinx/conf.py
@@ -31,11 +31,14 @@ source_suffix = ['.rst', '.md']
 # Add any Sphinx extension module names here, as strings. They can be
 # extensions coming with Sphinx (named 'sphinx.ext.*') or your custom
 # ones.
+sys.path.append(os.path.abspath('_extensions'))
 extensions = [
     'sphinx.ext.autodoc',
     'sphinx.ext.napoleon',
     'sphinx.ext.mathjax',
     'sphinx_markdown_tables',
+    'sphinxcontrib.inlinesyntaxhighlight',
+    'highlightjs',
 ]
 
 # Add any paths that contain templates here, relative to this directory.
@@ -290,6 +293,9 @@ texinfo_documents = [
 # If true, do not generate a @detailmenu in the "Top" node's menu.
 #texinfo_no_detailmenu = False
 
+# sphinxcontrib-inlinesyntaxhighlight options
+inline_highlight_literals = False
+
 # app setup hook
 def setup(app):
     app.add_config_value('recommonmark_config', {
diff --git a/site/src/site/sphinx/en/_extensions b/site/src/site/sphinx/en/_extensions
new file mode 120000
index 000000000..3bc7f121c
--- /dev/null
+++ b/site/src/site/sphinx/en/_extensions
@@ -0,0 +1 @@
+../_extensions/
\ No newline at end of file
diff --git a/site/src/site/sphinx/en/conf.py b/site/src/site/sphinx/en/conf.py
index cac3ead04..f1eb1d5d8 100644
--- a/site/src/site/sphinx/en/conf.py
+++ b/site/src/site/sphinx/en/conf.py
@@ -31,11 +31,14 @@ source_suffix = ['.rst', '.md']
 # Add any Sphinx extension module names here, as strings. They can be
 # extensions coming with Sphinx (named 'sphinx.ext.*') or your custom
 # ones.
+sys.path.append(os.path.abspath('_extensions'))
 extensions = [
     'sphinx.ext.autodoc',
     'sphinx.ext.napoleon',
     'sphinx.ext.mathjax',
     'sphinx_markdown_tables',
+    'sphinxcontrib.inlinesyntaxhighlight',
+    'highlightjs',
 ]
 
 # Add any paths that contain templates here, relative to this directory.
@@ -290,6 +293,9 @@ texinfo_documents = [
 # If true, do not generate a @detailmenu in the "Top" node's menu.
 #texinfo_no_detailmenu = False
 
+# sphinxcontrib-inlinesyntaxhighlight options
+inline_highlight_literals = False
+
 # app setup hook
 def setup(app):
     app.add_config_value('recommonmark_config', {