Merge branch 'feature/code-snippet' into develop

_includes/language-alias.html

@@ -0,0 +1,72 @@
+{% comment %}
+
+  Convert the alias of the syntax language to the official name
+
+  See: <https://github.com/rouge-ruby/rouge/wiki/List-of-supported-languages-and-lexers>
+
+{% endcomment %}
+
+{% assign _lang = include.language | default: '' %}
+
+{% case _lang %}
+  {% when 'actionscript', 'as', 'as3' %}
+    {{ 'ActionScript' }}
+  {% when 'applescript' %}
+    {{ 'AppleScript' }}
+  {% when 'brightscript', 'bs', 'brs' %}
+    {{ 'BrightScript' }}
+  {% when 'cfscript', 'cfc' %}
+    {{ 'CFScript' }}
+  {% when 'coffeescript', 'coffee', 'coffee-script' %}
+    {{ 'CoffeeScript' }}
+  {% when 'cs', 'csharp' %}
+   {{ 'C#' }}
+  {% when 'erl' %}
+    {{ 'Erlang' }}
+  {% when 'graphql' %}
+   {{ 'GraphQL' }}
+  {% when 'haskell', 'hs' %}
+   {{ 'Haskell' }}
+  {% when 'javascript', 'js' %}
+    {{ 'JavaScript' }}
+  {% when 'make', 'mf', 'gnumake', 'bsdmake' %}
+    {{ 'Makefile' }}
+  {% when 'md', 'mkd' %}
+    {{ 'Markdown' }}
+  {% when 'm' %}
+    {{ 'Matlab' }}
+  {% when 'objective_c', 'objc', 'obj-c', 'obj_c', 'objectivec' %}
+    {{ 'Objective-C' }}
+  {% when 'perl', 'pl' %}
+    {{ 'Perl' }}
+  {% when 'php','php3','php4','php5' %}
+    {{ 'PHP' }}
+  {% when 'plaintext', 'text' %}
+    {{ 'Text' }}
+  {% when 'py' %}
+    {{ 'Python' }}
+  {% when 'rb' %}
+    {{ 'Ruby' }}
+  {% when 'rs','no_run','ignore','should_panic' %}
+    {{ 'Rust' }}
+  {% when 'bash', 'zsh', 'ksh', 'sh' %}
+    {{ 'Shell' }}
+  {% when 'st', 'squeak' %}
+    {{ 'Smalltalk' }}
+  {% when 'tex'%}
+    {{ 'TeX' }}
+  {% when 'latex' %}
+    {{ 'LaTex' }}
+  {% when 'ts', 'typescript' %}
+    {{ 'TypeScript' }}
+  {% when 'vb', 'visualbasic' %}
+    {{ 'Visual Basic' }}
+  {% when 'vue', 'vuejs' %}
+    {{ 'Vue.js' }}
+  {% when 'yml' %}
+    {{ 'YAML' }}
+  {% when 'css', 'html', 'scss', 'ssh', 'toml', 'xml', 'yaml' %}
+    {{ _lang | upcase }}
+  {% else %}
+    {{ _lang | capitalize }}
+{% endcase %}

_includes/refactor-content.html

@@ -119,16 +119,23 @@
 
       {% if _left contains 'file="' %}
         {% assign _text = _left | split: 'file="' | last | split: '"' | first %}
+        {% assign _label_icon = 'far fa-file-code' %}
       {% else %}
-        {% assign _text = _left | split: 'language-' | last | split: ' ' | first %}
+        {% assign _lang = _left | split: 'language-' | last | split: ' ' | first %}
+        {% capture _text %}{% include language-alias.html language=_lang %}{% endcapture %}
+        {% assign _label_icon = 'fas fa-code small' %}
       {% endif %}
 
+      {% capture _label %}
+        <span text-data="{{ _text }}"><i class="fa-fw {{ _label_icon }}"></i></span>
+      {% endcapture %}
+
       {% assign _new_content = _new_content | append: _snippet
-          | append: '<div class="code-header" text-data="'
+          | append: '<div class="code-header">'
-          | append: _text
+          | append: _label
-          | append: '"><button aria-label="copy" data-original-title="'
+          | append: '<button aria-label="copy" title-succeed="'
           | append: site.data.locales[lang].post.button.copy_code.succeed
-          | append: '"><i class="far fa-clone"></i></button></div>'
+          | append: '"><i class="far fa-clipboard"></i></button></div>'
           | append: '<div class="highlight"><code>'
       %}
 

_javascript/utils/clipboard.js

@@ -41,7 +41,7 @@ $(function() {
   });
 
   $(btnSelector).tooltip({
-    trigger: 'click',
+    trigger: 'hover',
     placement: 'left'
   });
 
@@ -53,11 +53,12 @@ $(function() {
   const ICON_DEFAULT = getIcon(btnSelector);
 
   function showTooltip(btn) {
-    $(btn).tooltip('show');
+    const succeedTitle = $(btn).attr('title-succeed');
+    $(btn).attr('data-original-title', succeedTitle).tooltip('show');
   }
 
   function hideTooltip(btn) {
-    $(btn).tooltip('hide');
+    $(btn).tooltip('hide').removeAttr('data-original-title');
   }
 
   function setSuccessIcon(btn) {

_sass/addon/syntax.scss

@@ -172,24 +172,37 @@ div {
   align-items: center;
   line-height: 1.85rem;
 
-  // text data
+  // icons
-  &::before {
+  i {
-    content: attr(text-data);
+    font-size: 1rem;
-    color: var(--lang-badge-color);
+    color: var(--lang-badge-muted-color);
-    padding-left: 1em;
 
-    // language
+    &.small {
-    font-size: 0.75rem;
+      font-size: 70%;
-    font-weight: 600;
+      margin-left: 0.25rem;
-    text-transform: uppercase;
-
-    // file name
-    @at-root [file] #{&} {
-      font-size: 0.85rem;
-      text-transform: none;
     }
   }
 
+  // the label block
+  span {
+    padding-left: 0.6rem;
+
+    &:after {
+      content: attr(text-data);
+      margin-left: 0.3rem;
+      font-size: 0.85rem;
+      font-weight: 600;
+      color: var(--lang-badge-color);
+    }
+
+    @at-root [file] #{&} > i { // center the file icon
+      position: relative;
+      top: 1px;
+    }
+
+  }
+
+
   // clipboard
   button {
     border: 1px solid var(--code-header-bg);
@@ -197,28 +210,31 @@ div {
     padding: 0;
     width: 1.95rem;
     background-color: inherit;
-    color: var(--highlight-lineno-color);
 
     @extend %cursor-pointer;
 
     &[timeout] {
-      color: var(--clipboard-checked-color);
+      &:hover {
-      border-color: var(--clipboard-checked-color);
+        border-color: var(--clipboard-checked-color);
+      }
+
+      i {
+        color: var(--clipboard-checked-color);
+      }
     }
 
     &:not([timeout]):hover {
-      background-color: gray;
+      background-color: rgba(128, 128, 128, 0.37);
-      color: white;
+
+      i {
+        color: white;
+      }
     }
 
     &:focus {
       outline: none;
     }
 
-    i {
-      font-size: 0.9rem;
-    }
-
   }
 
 }

_sass/colors/dark-syntax.scss

@@ -75,7 +75,8 @@
   --highlight-lineno-color: #6c6c6d;
   --inline-code-bg: #272822;
   --code-header-bg: #353535;
-  --lang-badge-color: #6c6c6d;
+  --lang-badge-color: #858586;
+  --lang-badge-muted-color: #6c6c6d;
   --clipboard-checked-color: #2bcc2b;
 
   .highlight {

_sass/colors/light-syntax.scss

@@ -72,7 +72,8 @@
   --highlight-lineno-color: #c2c6cc;
   --inline-code-bg: #f3f3f3;
   --code-header-bg: #eaeaea;
-  --lang-badge-color: #a4a7ab;
+  --lang-badge-color: rgb(128 128 128 / 87%);
+  --lang-badge-muted-color: rgb(128 128 128 / 36%);
   --clipboard-checked-color: #43c743;
 
 } // light-syntax