hexo-theme-solitude 2.1.5 → 2.1.7

package/layout/includes/widgets/third-party/hot/artalk.pug

@@ -0,0 +1,56 @@
+- const { server, site } = theme.artalk
+
+script.
+    function updatePostsBasedOnComments() {
+        const location = window.location;
+        const posts = Array.from(document.querySelectorAll('.recent-post-item[onclick] .post_cover a'))
+            .map(item => item.href.replace(location, ''));
+
+        fetchCommentsData(posts)
+            .then(data => updatePostElements(posts, data))
+            .catch(error => console.error("Error fetching comments:", error));
+    }
+
+    function fetchCommentsData(posts) {
+        const url = `!{server}/api/v2/stats/page_comment?page_keys=${posts.join(',')}&site_name=!{site}`;
+        return fetch(url)
+            .then(res => res.json())
+            .then(data => data.data);
+    }
+
+    function updatePostElements(posts, data) {
+        posts.forEach(post => {
+            const commentCount = data[post];
+            if (commentCount > !{count}) {
+                const postElement = document.querySelector(`.recent-post-item[onclick*="${post}"]`);
+                if (postElement) {
+                    addHotTipIfNeeded(postElement);
+                }
+            }
+        });
+    }
+
+    function addHotTipIfNeeded(postElement) {
+        const infoTopTips = postElement.querySelector(".recent-post-info-top-tips");
+        const originalSpan = infoTopTips?.querySelector(".original");
+        const existingHotTip = infoTopTips?.querySelector(".hot-tip");
+
+        if (!existingHotTip && originalSpan) {
+            const hotTip = createHotTipElement();
+            infoTopTips.insertBefore(hotTip, originalSpan);
+        }
+    }
+
+    function createHotTipElement() {
+        const hotTip = document.createElement("span");
+        hotTip.classList.add("hot-tip");
+
+        const icon = document.createElement("i");
+        icon.classList.add("solitude", "fas", "fa-fire-flame-curved");
+        hotTip.appendChild(icon);
+
+        const commentCount = document.createTextNode("!{_p('hot-tip')}");
+        hotTip.appendChild(commentCount);
+
+        return hotTip;
+    }

package/layout/includes/widgets/third-party/hot/twikoo.pug

@@ -0,0 +1,57 @@
+script.
+    function updatePostsBasedOnComments() {
+        const location = window.location.origin;
+        const posts = Array.from(document.querySelectorAll('.recent-post-item[onclick] .post_cover a'))
+            .map(item => item.href.replace(location, ''));
+
+        const fetchCommentsCount = () => {
+            twikoo.getCommentsCount({
+                envId: "!{theme.twikoo.envId}",
+                urls: posts,
+                includeReply: true
+            }).then(handleCommentsResponse)
+              .catch(error => console.error("Error fetching comments:", error));
+        };
+
+        const handleCommentsResponse = (response) => {
+            response.forEach(comment => {
+                if (comment.count > !{count}) {
+                    const postElement = document.querySelector(`.recent-post-item[onclick*="${comment.url}"]`);
+                    if (postElement) {
+                        updatePostElement(postElement);
+                    }
+                }
+            });
+        };
+
+        const updatePostElement = (postElement) => {
+            const infoTopTips = postElement.querySelector(".recent-post-info-top-tips");
+            const originalSpan = infoTopTips?.querySelector(".original");
+            const existingHotTip = infoTopTips?.querySelector(".hot-tip");
+
+            if (!existingHotTip && originalSpan) {
+                const hotTip = createHotTipElement();
+                infoTopTips.insertBefore(hotTip, originalSpan);
+            }
+        };
+
+        const createHotTipElement = () => {
+            const hotTip = document.createElement("span");
+            hotTip.classList.add("hot-tip");
+
+            const icon = document.createElement("i");
+            icon.classList.add("solitude", "fas", "fa-fire-flame-curved");
+            hotTip.appendChild(icon);
+
+            const commentCount = document.createTextNode("!{_p('hot-tip')}");
+            hotTip.appendChild(commentCount);
+
+            return hotTip;
+        };
+
+        if (typeof twikoo === 'object') {
+            fetchCommentsCount();
+        } else {
+            utils.getScript('!{url_for(theme.cdn.twikoo)}').then(fetchCommentsCount);
+        }
+    }

package/layout/includes/widgets/third-party/pjax.pug

@@ -1,9 +1,10 @@
 - const google_adsense = theme.google_adsense.enable
+- const select = ['title','#body-wrap','#site-config','meta[name="description"]','.js-pjax','meta[property^="og:"]','#config-diff', '.rs_show', '.rs_hide']
 
 script.
     const pjax = new Pjax({
         elements: 'a:not([target="_blank"])',
-        selectors: ['title','#body-wrap','#site-config','meta[name="description"]','.js-pjax','meta[property^="og:"]','#config-diff', '.rs_show', '.rs_hide'],
+        selectors: !{JSON.stringify(select)},
         cacheBust: false,
         analytics: !{google_adsense},
         scrollRestoration: false

package/layout/index.pug

@@ -13,7 +13,7 @@ block content
                 include ./includes/widgets/home/categoryBar
             .recent-posts#recent-posts
                 if theme.comment.hot_tip.enable
-                    include ./includes/widgets/home/hot/index.pug
+                    include ./includes/widgets/third-party/hot/index.pug
                 if theme.carousel && is_home_first_page()
                     include ./includes/widgets/home/carousel.pug
                 for post, index in page.posts.sort("-sticky" || "-date").data

package/layout/tag.pug

@@ -14,4 +14,6 @@ block content
                 each post,index in page.posts.find({ parent: { $exists: false } }).data
                     include includes/widgets/home/postList
                 include includes/mixins/pagination
+            if theme.comment.hot_tip.enable
+                include ./includes/widgets/third-party/hot/index.pug
         include includes/widgets/aside/aside

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hexo-theme-solitude",
-  "version": "2.1.5",
+  "version": "2.1.7",
   "description": "A beautiful, powerful, and efficient Hexo theme developed by everfu.",
   "main": "package.json",
   "scripts": {

package/scripts/event/cdn.js

@@ -142,6 +142,6 @@ hexo.extend.filter.register('before_generate', () => {
     themeConfig.cdn = Object.assign(
         createCDNLink(internalSrc, CDN.internal, 'internal'),
         createCDNLink(thirdPartySrc, CDN.third_party),
-        deleteNullValue(CDN.option)
+        deleteNullValue(CDN.options)
     )
 })

package/scripts/event/init.js

@@ -3,7 +3,6 @@ hexo.extend.filter.register('before_generate', () => {
     const nodeVer = process.version.replace(/^v/, '');
     const [majorVer] = nodeVer.split('.');
     const logger = hexo.log;
-    const config = hexo.config;
 
     if (hexoVer < 7.0) {
         logger.error('请把 Hexo 升级到 V7.0.0 或更高的版本！');

package/scripts/event/merge_config.js

@@ -33,18 +33,9 @@ hexo.extend.filter.register('before_generate', () => {
       }
     },
     aside: {
-      home: {
-        noSticky: 'about',
-        Sticky: 'allInfo'
-      },
-      post: {
-        noSticky: 'about',
-        Sticky: 'allInfo'
-      },
-      page: {
-        noSticky: 'about',
-        Sticky: 'allInfo'
-      },
+      home: { noSticky: 'about', Sticky: 'allInfo' },
+      post: { noSticky: 'about', Sticky: 'allInfo' },
+      page: { noSticky: 'about', Sticky: 'allInfo' },
       card: {
         style: 0,
         author: {
@@ -73,24 +64,12 @@ hexo.extend.filter.register('before_generate', () => {
       },
       newest_comment: {
         enable: false,
-        storage: .5,
+        storage: 0.5,
         limit: 5
       },
-      toc: {
-        post: true,
-        page: false,
-        vague: true,
-      },
-      tags: {
-        enable: true,
-        limit: 20,
-        highlight: false,
-        list: [],
-      },
-      archive: {
-        enable: true,
-        type: 'month'
-      },
+      toc: { post: true, page: false, vague: true },
+      tags: { enable: true, limit: 20, highlight: false, list: [] },
+      archive: { enable: true, type: 'month' },
       siteinfo: {
         postcount: true,
         wordcount: false,
@@ -111,9 +90,7 @@ hexo.extend.filter.register('before_generate', () => {
       tags: true,
       categories: true,
       archives: 0,
-      default: {
-        cover: ['/img/default.avif'],
-      }
+      default: { cover: ['/img/default.avif'] },
     },
     post: {
       default: {
@@ -150,10 +127,7 @@ hexo.extend.filter.register('before_generate', () => {
         api: 'https://api.qjqq.cn/api/Imgcolor?img=',
         time: 43200000,
       },
-      share: {
-        enable: false,
-        list: []
-      },
+      share: { enable: false, list: [] },
       footer: {
         enable: true,
         desc: "The article from Solitude",
@@ -341,7 +315,7 @@ hexo.extend.filter.register('before_generate', () => {
       enable: false,
       recentComment: {
         enable: false,
-        storage: .2,
+        storage: 0.2,
       },
       card: {
         tags: true,
@@ -404,7 +378,7 @@ hexo.extend.filter.register('before_generate', () => {
       enable: false,
       dark: 'https://bu.dusays.com/2023/09/29/651685ce667d1.jpg',
       light: 'https://bu.dusays.com/2023/09/29/651685cc18d39.jpg',
-      opacity: .2,
+      opacity: 0.2,
     },
     translate: {
       enable: false,
@@ -427,6 +401,7 @@ hexo.extend.filter.register('before_generate', () => {
       custom_format: '//open.lightxi.com/cdnjs/ajax/libs/${cdnjs_name}/${version}/${min_cdnjs_file}',
       option: {}
     }
-  }
-  hexo.theme.config = Object.assign(defaultConfig, hexo.theme.config)
+  };
+
+  hexo.theme.config = { ...defaultConfig, ...hexo.theme.config };
 }, 1)

package/scripts/filter/default.js

@@ -2,32 +2,31 @@
 
 hexo.extend.filter.register('after_post_render', function (data) {
     data.title = data.title || 'Untitled';
-    const {config} = hexo.theme;
-    if (data.layout === 'post') {
-        let {copyright, locate, cover} = hexo.theme.config.post.default
-        cover = cover !== null ? cover : ['/img/default.avif']
-        data.locate = data.locate || locate
-        data.cc = data.cc || copyright
-        data.cover = data.cover || cover[getRandomInt(0, cover?.length)]
-        data.excerpt = data.description || data.excerpt
-        data.toc = !!(config.aside.toc.post && data.toc !== false)
-        data.ai = data.ai !== false;
-        data.aside = data.aside || true;
+    const { config } = hexo.theme;
+    const defaultCover = ['/img/default.avif'];
+
+    const setCoverAndExcerpt = (layout) => {
+        const { copyright, locate, cover } = hexo.theme.config[layout].default;
+        data.locate = data.locate || locate;
+        data.cc = data.cc || copyright;
+        data.cover = data.cover || (cover?.length ? cover[getRandomInt(0, cover.length)] : defaultCover[0]);
+        data.excerpt = layout === 'post' ? data.description || data.excerpt : data.title;
+        data.toc = !!(config.aside.toc[layout] && data.toc !== false);
+        data.aside = layout === 'post' ? (data.aside || true) : (data.aside || false);
+    };
+
+    if (data.layout === 'post' || data.layout === 'page') {
+        setCoverAndExcerpt(data.layout);
     }
-    if (data.layout === 'page') {
-        let {cover} = hexo.theme.config.page.default
-        cover = cover !== null ? cover : ['/img/default.avif']
-        data.cover = data.cover || cover[getRandomInt(0, cover?.length)]
-        data.excerpt = data.title
-        data.toc = !!(config.aside.toc.page && data.toc !== false && data.aside);
-        data.aside = data.aside || false;
+
+    if (data.layout === 'post') {
+        data.ai = data.ai || true;
     }
+
     data.comment = !!(config.comment.use && data.comment !== false);
     return data;
 });
 
 function getRandomInt(min, max) {
-    min = Math.ceil(min);
-    max = Math.floor(max);
-    return Math.floor(Math.random() * (max - min)) + min;
+    return Math.floor(Math.random() * (max - min)) + Math.ceil(min);
 }

package/scripts/filter/lazyload.js

@@ -1,7 +1,5 @@
 'use strict'
 
-const urlFor = require('hexo-util').url_for.bind(hexo)
-
 const lazyload = (content, img) => {
     return content.replace(/(<img(?!.*?class[\t]*=[\t]*['"].*?nolazyload.*?['"]).*? src=)/gi, `$1 "${img}" data-lazy-src=`)
 }
@@ -9,12 +7,12 @@ const lazyload = (content, img) => {
 hexo.extend.filter.register('after_render:html', function (data) {
     const { enable, placeholder ,field } = hexo.theme.config.lazyload
     if (!enable || field !== 'site') return;
-    return lazyload(data, urlFor(placeholder))
+    return lazyload(data, placeholder)
 })
 
 hexo.extend.filter.register('after_post_render', data => {
     const { enable, placeholder, field } = hexo.theme.config.lazyload
     if (!enable || field !== 'post') return
-    data.content = lazyload(data.content, urlFor(placeholder))
+    data.content = lazyload(data.content, placeholder)
     return data
 })

package/scripts/helper/getArchiveLength.js

@@ -1,14 +1,12 @@
-const moment = require('moment')
+const moment = require('moment');
 
-hexo.extend.helper.register('getArchiveLength', function (type) {
-    if (type !== 'year' && type !== 'month') {
-        type = 'year';
-    }
-    const posts = this.site.posts.sort('-date').data
-    let archive = {}
-    for (const post of posts) {
-        const postdate = type === 'year' ? moment(post.date).format('YYYY') : moment(post.date).format('YYYY/MM');
+hexo.extend.helper.register('getArchiveLength', function (type = 'year') {
+    const validTypes = ['year', 'month'];
+    type = validTypes.includes(type) ? type : 'year';
+
+    return this.site.posts.sort('-date').data.reduce((archive, post) => {
+        const postdate = moment(post.date).format(type === 'year' ? 'YYYY' : 'YYYY/MM');
         archive[postdate] = (archive[postdate] || 0) + 1;
-    }
-    return archive;
+        return archive;
+    }, {});
 });

package/scripts/helper/related_post.js

@@ -6,80 +6,80 @@
 'use strict'
 
 hexo.extend.helper.register('related_posts', function (currentPost, allPosts) {
-    const relatedPosts = []
-    const config = hexo.theme.config
-    const limitNum = config.related_post.limit || 6
-    const dateType = config.related_post.date_type || 'created'
-    const headlineLang = this._p('star')
+    const config = hexo.theme.config;
+    const limitNum = config.related_post.limit || 6;
+    const dateType = config.related_post.date_type || 'created';
+    const headlineLang = this._p('star');
 
-    currentPost.tags.forEach(function (tag) {
-        allPosts.forEach(function (post) {
+    const relatedPostsMap = new Map();
+
+    currentPost.tags.forEach(tag => {
+        allPosts.forEach(post => {
             if (isTagRelated(tag.name, post.tags) && currentPost.path !== post.path) {
-                const relatedPost = {
-                    title: post.title,
-                    path: post.path,
-                    cover: post.cover,
-                    cover_type: post.cover_type,
-                    weight: 1,
-                    updated: post.updated,
-                    created: post.date
-                }
-                const index = findItem(relatedPosts, 'path', post.path)
-                if (index !== -1) {
-                    relatedPosts[index].weight += 1
+                if (!relatedPostsMap.has(post.path)) {
+                    relatedPostsMap.set(post.path, {
+                        title: post.title,
+                        path: post.path,
+                        cover: post.cover || 'var(--default-bg-color)',
+                        weight: 1,
+                        updated: post.updated,
+                        created: post.date
+                    });
                 } else {
-                    relatedPosts.push(relatedPost)
+                    relatedPostsMap.get(post.path).weight += 1;
                 }
             }
-        })
-    })
+        });
+    });
 
+    const relatedPosts = Array.from(relatedPostsMap.values());
     if (relatedPosts.length === 0) {
-        return ''
+        return '';
     }
 
-    relatedPosts.sort(compare('weight', dateType))
+    relatedPosts.sort(compare('weight', dateType));
 
-    let result = '<div class="relatedPosts">'
-    result += `<div class="headline"><i class="solitude fa-solid fa-star"></i><span>${headlineLang}</span><div class="relatedPosts-link"><a onclick="event.preventDefault(); toRandomPost();" href="javascript:void(0);" rel="external nofollow" data-pjax-state="">${this._p('random')}</a></div></div>`
-    result += '<div class="relatedPosts-list">'
+    let result = `
+        <div class="relatedPosts">
+            <div class="headline">
+                <i class="solitude fa-solid fa-star"></i>
+                <span>${headlineLang}</span>
+                <div class="relatedPosts-link">
+                    <a onclick="event.preventDefault(); toRandomPost();" href="javascript:void(0);" rel="external nofollow" data-pjax-state="">${this._p('random')}</a>
+                </div>
+            </div>
+            <div class="relatedPosts-list">`;
 
     for (let i = 0; i < Math.min(relatedPosts.length, limitNum); i++) {
-        const cover = relatedPosts[i].cover || 'var(--default-bg-color)'
-        const title = this.escape_html(relatedPosts[i].title)
-        result += `<div><a href="${this.url_for(relatedPosts[i].path)}" title="${title}">`
-        result += `<img class="cover" src="${this.url_for(cover)}" alt="cover">`
-        result += `<div class="content is-center"><div class="title">${title}</div></div>`
-        result += '</a></div>'
+        const { cover, title, path } = relatedPosts[i];
+        result += `
+            <div>
+                <a href="${this.url_for(path)}" title="${this.escape_html(title)}">
+                    <img class="cover" src="${this.url_for(cover)}" alt="cover">
+                    <div class="content is-center">
+                        <div class="title">${this.escape_html(title)}</div>
+                    </div>
+                </a>
+            </div>`;
     }
 
-    result += '</div></div>'
-    return result
-})
-
-function isTagRelated(tagName, TBDtags) {
-    return TBDtags.some(function (tag) {
-        return tagName === tag.name
-    })
-}
+    result += `
+            </div>
+        </div>`;
+    return result;
+});
 
-function findItem(arrayToSearch, attr, val) {
-    return arrayToSearch.findIndex(function (item) {
-        return item[attr] === val
-    })
+function isTagRelated(tagName, tags) {
+    return tags.some(tag => tagName === tag.name);
 }
 
 function compare(attr, dateType) {
-    return function (a, b) {
-        const val1 = a[attr]
-        const val2 = b[attr]
+    return (a, b) => {
+        const val1 = a[attr];
+        const val2 = b[attr];
         if (val1 === val2) {
-            if (dateType === 'created') {
-                return b.created - a.created
-            } else if (dateType === 'updated') {
-                return b.updated - a.updated
-            }
+            return dateType === 'created' ? b.created - a.created : b.updated - a.updated;
         }
-        return val2 - val1
-    }
+        return val2 - val1;
+    };
 }

package/scripts/tags/article.js

@@ -15,4 +15,4 @@ const article = ([path]) => {
   return `<div class="recent-post-item" onclick="pjax.loadUrl('${'/' + post.path}')">${postCover + recentPostInfo}</div>`;
 }
 
-hexo.extend.tag.register('article', article)
+hexo.extend.tag.register('article', article)

package/scripts/tags/tabs.js

@@ -5,51 +5,33 @@
 
 'use strict'
 
-function postTabs ([name, active], content) {
-  const tabBlock = /<!--\s*tab (.*?)\s*-->\n([\w\W\s\S]*?)<!--\s*endtab\s*-->/g
-
-  const matches = []
-  let match
-  let tabId = 0
-  let tabNav = ''
-  let tabContent = ''
-
-  active = Number(active) || 0
-
-  while ((match = tabBlock.exec(content)) !== null) {
-    matches.push(match[1])
-    matches.push(match[2])
-  }
-
-  for (let i = 0; i < matches.length; i += 2) {
-    const tabParameters = matches[i].split('@')
-    let postContent = matches[i + 1]
-    let tabCaption = tabParameters[0] || ''
-    let tabIcon = tabParameters[1] || ''
-    let tabHref = ''
-
-    postContent = hexo.render.renderSync({ text: postContent, engine: 'markdown' }).trim()
-    tabHref = (name + ' ' + tabId).toLowerCase().split(' ').join('-');
-
-    ((tabCaption.length === 0) && (tabIcon.length === 0)) && (tabCaption = name + ' ' + tabId)
-
-    const isOnlyicon = tabIcon.length > 0 && tabCaption.length === 0 ? ' style="text-align: center;"' : ''
-    const icon = tabIcon.trim()
-    tabIcon.length > 0 && (tabIcon = `<i ${isOnlyicon} class="tab solitude ${icon}"></i>`)
-
-    const toTop = '<button type="button" class="tab-to-top" aria-label="scroll to top"><i class="solitude fas fa-arrow-up"></i></button>'
-    const isActive = active === tabId ? ' active' : ''
-    tabNav += `<li class="tab${isActive}"><button type="button" data-href="#${tabHref}">${tabIcon + tabCaption.trim()}</button></li>`
-    tabContent += `<div class="tab-item-content${isActive}" id="${tabHref}">${postContent + toTop}</div>`
-    tabId += 1
-  }
-
-  tabNav = `<ul class="nav-tabs">${tabNav}</ul>`
-  tabContent = `<div class="tab-contents">${tabContent}</div>`
-
-  return `<div class="tabs" id="${name.toLowerCase().split(' ').join('-')}">${tabNav + tabContent}</div>`
+function postTabs([name, active], content) {
+  const tabBlock = /<!--\s*tab (.*?)\s*-->\n([\w\W\s\S]*?)<!--\s*endtab\s*-->/g;
+  const matches = [...content.matchAll(tabBlock)];
+  
+  active = Number(active) || 0;
+
+  const tabItems = matches.map((match, tabId) => {
+    const [tabCaption = '', tabIcon = ''] = match[1].split('@');
+    const postContent = hexo.render.renderSync({ text: match[2], engine: 'markdown' }).trim();
+    const tabHref = `${name.toLowerCase().replace(/\s+/g, '-')}-${tabId}`;
+    
+    const iconHtml = tabIcon ? `<i class="${tabIcon.trim()} tab solitude"></i>` : '';
+    const isActive = active === tabId ? ' active' : '';
+    const toTopButton = '<button type="button" class="tab-to-top" aria-label="scroll to top"><i class="solitude fas fa-arrow-up"></i></button>';
+    
+    return {
+      nav: `<li class="tab${isActive}"><button type="button" data-href="#${tabHref}">${iconHtml}${tabCaption.trim() || `${name} ${tabId}`}</button></li>`,
+      content: `<div class="tab-item-content${isActive}" id="${tabHref}">${postContent}${toTopButton}</div>`
+    };
+  });
+
+  const tabNav = `<ul class="nav-tabs">${tabItems.map(item => item.nav).join('')}</ul>`;
+  const tabContent = `<div class="tab-contents">${tabItems.map(item => item.content).join('')}</div>`;
+
+  return `<div class="tabs" id="${name.toLowerCase().replace(/\s+/g, '-')}">${tabNav}${tabContent}</div>`;
 }
 
-hexo.extend.tag.register('tabs', postTabs, { ends: true })
-hexo.extend.tag.register('subtabs', postTabs, { ends: true })
-hexo.extend.tag.register('subsubtabs', postTabs, { ends: true })
+hexo.extend.tag.register('tabs', postTabs, { ends: true });
+hexo.extend.tag.register('subtabs', postTabs, { ends: true });
+hexo.extend.tag.register('subsubtabs', postTabs, { ends: true });

package/source/css/_comments/twikoo.styl

@@ -350,13 +350,13 @@ img.tk-avatar-img
   border var(--style-border-always)
 
 .el-input-group__append, .el-input-group__prepend
-  background-color var(--efu-card-bg) !important
+  background-color var(--efu-card-bg)
   color var(--efu-fontcolor) !important
   border 0 !important
   font-weight 700
 
 .el-input__inner
-  background var(--efu-secondbg) !important
+  background-color: var(--efu-secondbg) !important
   border 0 !important
   color var(--efu-fontcolor) !important
   padding-left 8px
@@ -372,7 +372,7 @@ img.tk-avatar-img
   border none
 
 .el-textarea__inner
-  background var(--efu-secondbg) !important
+  background-color var(--efu-secondbg)
   color var(--efu-fontcolor) !important
   border-radius 12px !important
   min-height 100px !important

package/source/css/_highlight/highlight/diff.styl

@@ -27,6 +27,12 @@ figure.highlight
 
   .emphasis
     color $highlight-emphasis-light
+  
+  .addition
+    color $highlight-inserted
+
+  .deletion
+    color $highlight-deleted
 
   [data-theme=dark] &  
     .keyword
@@ -48,4 +54,10 @@ figure.highlight
       color $highlight-title-dark
 
     .emphasis
-      color $highlight-emphasis-dark
+      color $highlight-emphasis-dark
+
+    .addition
+      color $highlight-inserted
+
+    .deletion
+      color $highlight-deleted