开发在线文章代码块占比检测页面（上）

前端

2023-09-30 13:35:45

在之前的文章中，我们用 Python 简单写了一个检测文章中关于代码和代码块的占比的脚本，有些小伙伴们反馈能不能出一个在线版本的，方便将写后文章代码贴放上去检测。

这个需求非常合理，而且在线版本确实比命令行版本要方便得多。为了满足大家的需求，我决定开发一个在线检测文章中代码块占比的页面。

这个页面非常简单，它只有一个文本框和一个按钮。用户只需要将文章粘贴到文本框中，然后点击按钮，就可以检测文章中代码块的占比了。

检测结果将显示在文本框的下方，包括代码块的数量、代码块的总字数、文章的总字数以及代码块的占比。

这个页面使用 Python 和 Flask 开发，非常简单，但是非常实用。它可以帮助用户快速检测文章中代码块的占比，并做出相应的调整。

如果你想使用这个页面，可以访问以下链接：

在线检测文章中代码块占比的页面

希望这个页面能够帮助大家更好地管理文章中的代码块，并确保文章的代码块与文字内容之间保持适当的平衡。

在线检测文章中代码块占比的页面（下）

在上一篇文章中，我们介绍了如何开发一个在线检测文章中代码块占比的页面。这个页面非常简单，但是非常实用。它可以帮助用户快速检测文章中代码块的占比，并做出相应的调整。

在这一篇文章中，我们将继续介绍这个页面的开发细节，并提供一些使用技巧。

开发细节

这个页面使用 Python 和 Flask 开发。Flask 是一个非常流行的 Python Web 框架，它非常轻量级，而且非常容易使用。

这个页面的代码非常简单，只有几个文件。其中，最重要的文件是 app.py 文件。这个文件包含了页面的主逻辑。

from flask import Flask, request, render_template

app = Flask(__name__)

@app.route('/', methods=['GET', 'POST'])
def index():
    if request.method == 'POST':
        text = request.form['text']
        code_blocks = []
        for line in text.split('\n'):
            if line.startswith('```'):
                code_blocks.append(line)
        code_block_count = len(code_blocks)
        code_block_total_words = 0
        for code_block in code_blocks:
            code_block_total_words += len(code_block.split())
        total_words = len(text.split())
        code_block_ratio = code_block_total_words / total_words
        return render_template('index.html', code_block_count=code_block_count, code_block_total_words=code_block_total_words, total_words=total_words, code_block_ratio=code_block_ratio)
    else:
        return render_template('index.html')

if __name__ == '__main__':
    app.run()

这个代码非常简单，它首先从请求中获取文章文本，然后将文章文本拆分为行。接下来，它遍历每一行，如果一行以 ````` 开头，那么它就是一个代码块。然后，它将这个代码块添加到代码块列表中。

最后，它计算代码块的数量、代码块的总字数、文章的总字数以及代码块的占比。然后，它将这些结果渲染到 index.html 模板中。

index.html 模板也非常简单，它只是显示检测结果。

<!DOCTYPE html>
<html>
<head>
    
</head>
<body>
    <h1>在线检测文章中代码块占比的页面</h1>
    <form action="/" method="POST">
        <textarea name="text" cols="80" rows="20"></textarea>
        <br>
        <input type="submit" value="检测">
    </form>
    {% if code_block_count %}
    <p>代码块数量：{{ code_block_count }}</p>
    <p>代码块总字数：{{ code_block_total_words }}</p>
    <p>文章总字数：{{ total_words }}</p>
    <p>代码块占比：{{ code_block_ratio }}</p>
    {% endif %}
</body>
</html>