<文章代码格式>编写HTML页面将code用特定的格式显示出来

1.问题

使用django编写的私人网站,文章内容格式始终不是自己想要的,整体效果不美观.

2.解决方案

- 确认HTMl的全局CSS样式是否使用

{font-size:100%;font:inherit;}等样式.如果使用了,将其注释掉.

- 设置CSS样式

<style>
#pre{
    background-color: #f5f5f5;
    font-family: Courier New !important;
    font-size: 12px !important;
    border: 1px solid #ccc;
    padding: 5px;
    overflow: auto;
    margin: 5px 0;
    color: #000;
}
</style>

- 前端HTML代码

<!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Marked in the browser</title>
    <style>

        div {
             900px;
            margin-left: 228px;
        }

        div #main-head {
            font-size: 15px;
            font-family: 华文行楷;
        }

        div #main-head #head {
            font-size: 45px;
            color: gray;
            line-height: 35px;
        }

        #content {
            font-family: 华文楷体;
            color: #00c0ef;
        }

        #content p img {
             100% !important;
        }

        #content pre {
            background-color: #f5f5f5;
            font-family: Courier New !important;
            border: 1px solid #ccc;
            overflow: auto;
            color: #000;
            padding: 1px;
        }

    </style>
</head>
<body>
<div>
    <p id="main-head">
        <span id="head">测试文章</span>&nbsp;&nbsp;
        <span id="author">西拉嗦</span>&nbsp;&nbsp;
        <span id="time">2020年6月6日20:44:30</span></p>
    <hr>
    <article id="content">
        <h2 id="h1-u4F60u597D"><a name="你好" class="reference-link"></a><span
                class="header-link octicon octicon-link"></span>你好:</h2>
        <h3 id="h3--"><a name="我是小叶，很高兴认识你！" class="reference-link"></a><span
                class="header-link octicon octicon-link">&emsp;&emsp;</span>我是小叶，很高兴认识你！</h3>
        <pre class="prettyprint linenums prettyprinted" style=""><ol class="linenums"><li class="L0"><code
                class="lang-python"><span class="kwd">print</span><span class="pun">(</span><span
                class="str">'Hello world'</span><span class="pun">)</span></code></li></ol></pre>
        <p><img src="http://127.0.0.1:8888/group1/M00/00/00/CgACD17bZnCAdR8kAAgZxQ4Sueg070.jpg" alt="">
        </p>
    </article>
</div>
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<script>
    co = document.getElementById('content');
    co.innerHTML = marked(co.valueOf());
</script>
</body>
</html>

<文章代码格式>编写HTML页面将code用特定的格式显示出来

1.问题

2.解决方案

- 确认HTMl的全局CSS样式是否使用

- 设置CSS样式

- 前端HTML代码

3.效果展示