首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在Sphinx的html输出中包含源码行号?

在Sphinx的html输出中包含源码行号,可以通过配置Sphinx的扩展和主题来实现。

首先,确保你已经安装了Sphinx和相关的扩展。然后,在你的Sphinx项目的配置文件(通常是conf.py)中,添加以下配置:

代码语言:txt
复制
extensions = [
    'sphinx.ext.autodoc',
    'sphinx.ext.viewcode',
    'sphinx.ext.githubpages',
]

html_theme = 'sphinx_rtd_theme'
html_theme_options = {
    'style_external_links': True,
    'style_nav_header_background': '#2980B9',
    'collapse_navigation': False,
    'sticky_navigation': True,
    'navigation_depth': 4,
    'includehidden': True,
    'titles_only': False,
    'display_version': True,
    'prev_next_buttons_location': 'bottom',
    'style_external_links': True,
    'vcs_pageview_mode': '',
    'style_external_links': True,
    'style_external_links_target': '_blank',
}

html_css_files = [
    'css/custom.css',
]

html_js_files = [
    'js/custom.js',
]

上述配置中,extensions列表中添加了'sphinx.ext.viewcode'扩展,该扩展用于生成源码链接。html_theme设置为sphinx_rtd_theme,这是一个常用的主题,你也可以根据自己的需求选择其他主题。

接下来,在你的Sphinx项目的源码目录中,创建一个_templates文件夹,并在其中创建一个layout.html文件。在layout.html文件中,添加以下代码:

代码语言:txt
复制
{% extends "!layout.html" %}

{% block extrahead %}
{{ super() }}
<link rel="stylesheet" type="text/css" href="{{ pathto('_static/css/custom.css', 1) }}" />
<script type="text/javascript" src="{{ pathto('_static/js/custom.js', 1) }}"></script>
{% endblock %}

上述代码中,_static/css/custom.css_static/js/custom.js分别是自定义的CSS和JavaScript文件,你可以根据需要进行修改。

最后,在你的Sphinx项目的源码目录中,创建一个_static文件夹,并在其中创建一个css文件夹和一个js文件夹。在css文件夹中,创建一个custom.css文件,在js文件夹中,创建一个custom.js文件。

custom.css文件中,添加以下代码:

代码语言:txt
复制
div.highlight pre {
    counter-reset: linenumber;
}

div.highlight pre span.line:before {
    content: counter(linenumber);
    counter-increment: linenumber;
    padding-right: 0.6em;
    color: #999;
    display: inline-block;
    width: 2em;
    text-align: right;
    margin-right: 0.5em;
    border-right: 1px solid #ddd;
}

custom.js文件中,添加以下代码:

代码语言:txt
复制
$(document).ready(function() {
    $('div.highlight').each(function() {
        var lines = $(this).find('pre').text().split('\n').length - 1;
        var $numbering = $('<ul/>').addClass('pre-numbering');
        $(this)
            .addClass('has-numbering')
            .append($numbering);
        for (i = 1; i <= lines; i++) {
            $numbering.append($('<li/>').text(i));
        }
    });
});

保存以上文件后,重新生成Sphinx文档,你将在HTML输出中看到源码行号的显示。

这里推荐腾讯云的云服务器CVM产品,它提供了稳定可靠的云计算基础设施,适用于各种规模的应用场景。你可以通过以下链接了解更多关于腾讯云服务器CVM的信息:腾讯云服务器CVM

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

没有搜到相关的视频

领券