前端小实践之修复github列表渲染错误

Develop 前端

 2024/12/17 

起因/问题描述

今天兴致来了上头了想编辑自己的Github主页，写好之后突然发现所有的列表都丢失了前缀。即本来应该是：

1. xxx
2. xxx
· xxx

但是实际渲染出来的效果只有缩进对齐而没有这些序号和点的前缀，看起来非常的难受，遂开始排查问题。

检查过程

首先肯定是检查了源代码，markdown确认没有问题之后去github随便搜了个markdown的教程，发现也有这个问题，看来问题出在本地。

F12检查了一下源代码，markdown最后会被渲染成list：有序列表和无序列表分别是css中的ol和ul样式，列表项则是<li>。html中会采用<ul></ul>标签进行实现。

检查CSS样式发现，<li>对象的一个元素list-style-type的值居然是none，在注入的样式里覆盖了浏览器自己的User Agent样式。

打开一个列表显示正常的网站检查一下，要想显示前缀，这一项的值应该是disc才对。同时更换浏览器用手机打开发现是正常的

虽然我们不知道github提供的样式出了什么问题，但是我们似乎本地也不好修这个问题。

结果

问AI，ai给了我一个tamper monkey的脚本：

// ==UserScript==
// @name         GitHub List Style Fix
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Change github list.
// @author       Zj_W1nd
// @match        https://github.com/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // 添加自定义样式
    const style = document.createElement('style');
    style.innerHTML = `
        ul, ol {
            list-style-type: disc !important;
            margin-left: 20px !important;
        }
    `;
    document.head.appendChild(style);
})();

在github网页上强制修改前端的列表style，还真解决了这个问题。这么一搞感觉前端就是疯狂的各种标签和字段。

Next Post

ciscn_ccb2025初赛-avm重做wp
Previous Post

How2Heap总集篇导演剪辑剧场版

CATALOG

1. 起因/问题描述
2. 检查过程
3. 结果