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>
<span id="author">西拉嗦</span>
<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">  </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>
3.效果展示
