欢迎访问宙启技术站
智能推送

通过PygmentsHTML格式化器实现代码块的复制和粘贴功能

发布时间:2023-12-23 01:45:08

Pygments是一个功能强大的语法高亮库,它支持将代码转换成HTML格式。其中的HTML格式化器可以帮助我们实现代码块的复制和粘贴功能。

下面是一个使用Pygments的示例代码,演示了如何使用PygmentsHTML格式化器实现代码块的复制和粘贴功能。

from pygments import highlight
from pygments.lexers import get_lexer_by_name
from pygments.formatters import HtmlFormatter

def format_code(code, language):
    # 选择对应语言的代码分词器
    lexer = get_lexer_by_name(language, stripall=True)
    # 使用HTML格式化器将代码转换成带有语法高亮的HTML
    formatter = HtmlFormatter(linenos=True, cssclass="highlight")
    highlighted_code = highlight(code, lexer, formatter)
    # 添加复制和粘贴功能的HTML代码
    copy_paste_code = '''
    <div class="code-container">
        <div class="code">{}</div>
        <div class="copy-button" onclick="copyCode(this)">Copy</div>
    </div>
    '''
    return copy_paste_code.format(highlighted_code)

# 使用示例
code = '''
def factorial(n):
    if n == 0:
        return 1
    else:
        return n * factorial(n-1)
'''
formatted_code = format_code(code, "python")
print(formatted_code)

在上述示例中,首先通过get_lexer_by_name()函数选择了对应语言的代码分词器,然后使用HtmlFormatter将代码转换成带有语法高亮的HTML。接着,我们定义了一个包含复制和粘贴功能的HTML代码,其中代码块部分使用了highlighted_code的变量值。最后,返回的formatted_code即是带有复制和粘贴功能的代码块的HTML。

在上述示例中,我们为复制按钮添加了一个onclick事件,当用户点击复制按钮时,调用了copyCode()函数。下面是一个示例的JavaScript代码,演示了复制代码的实现:

function copyCode(element) {
    // 获取代码块所在的div元素
    var codeContainer = element.parentElement;
    // 获取代码块的文本内容
    var codeText = codeContainer.getElementsByClassName("code")[0].innerText;

    // 创建一个textarea元素,用于复制文本
    var textarea = document.createElement('textarea');
    textarea.textContent = codeText;
    document.body.appendChild(textarea);

    // 选中textarea中的文本
    textarea.select();
    document.execCommand('copy');
    
    // 移除textarea元素
    document.body.removeChild(textarea);
}

在这个JavaScript代码中,我们首先获取了包含代码块的div元素,然后获取了代码块的文本内容。接着,我们创建了一个textarea元素,并将代码文本放入其中。然后,我们选中了textarea中的文本,并使用document.execCommand函数执行copy命令,将文本复制到剪贴板中。最后,我们移除了创建的textarea元素。

这样,当用户点击代码块旁边的复制按钮时,对应的代码块的文本内容将被复制到剪贴板中。

综上所述,通过Pygments的HtmlFormatter和一些JavaScript代码,我们可以轻松地实现代码块的复制和粘贴功能。