Merge pull request Hopetree#218 from Hopetree/develop

Develop

apps/blog/static/blog/css/detail.css

@@ -114,7 +114,14 @@ pre {
 .code-wrapper {
  border-radius: 8px 8px 0 0;
  background-color: #3c3f41;
- padding-left: 68%;
+ text-align: justify;
+}
+
+.code-wrapper .code-lang {
+ float: left;
+ padding-left: 1.1rem;
+ padding-top: .1rem;
+ font-size: .9rem;
 }
 
 .code-wrapper button {
@@ -124,6 +131,8 @@ pre {
  font-size: .8rem;
  cursor: pointer; /* 改变光标样式 */
  outline: none; /* 去掉聚焦时的虚线 */
+ float: right;
+ padding-right: 1.1rem;
 }
 
 
@@ -157,10 +166,6 @@ pre {
  .f-17 {
  font-size: 15px;
  }
-
- .code-wrapper {
- padding-left: 82%;
- }
 }
 
 /* Medium devices (tablets, 768px and up) */
@@ -169,24 +174,14 @@ pre {
  .f-17 {
  font-size: 16px;
  }
-
- .code-wrapper {
- padding-left: 83%;
- }
 }
 
 /* Large devices (desktops, 992px and up) */
 /* X-iPad Y-iPad Pro*/
 @media (min-width: 992px) {
- .code-wrapper {
- padding-left: 82%;
- }
 }
 
 /* Extra large devices (large desktops, 1200px and up) */
 /* PC X-iPad Pro*/
 @media (min-width: 1200px) {
- .code-wrapper {
- padding-left: 87%;
- }
 }

apps/blog/static/blog/js/code.js

@@ -13,10 +13,17 @@ function copyToClipboard(text) {
 }
 
 $('.codehilite').each(function () {
+ // 读取代码块语言
+ const langClass = $(this).find('pre code').attr('class');
+ const language = langClass.replace(/^.*\blanguage-([^ ]+).*$/, '$1') || 'unknown';
+ // console.log(language);
  const codeText = $(this).find('pre').text();
  const copyElm = $('<div>').addClass('code-wrapper');
- const copyButton = $('<div>').html('<button><svg class="m-2" stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4" height="1.2em" width="1.2em" xmlns="https://www.w3.org/2000/svg"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path><rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect></svg>Copy code</button>');
+ const copyButton = $('<button>').html('<svg class="m-2" stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4" height="1.2em" width="1.2em" xmlns="https://www.w3.org/2000/svg"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path><rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect></svg>Copy code');
+ copyElm.append($('<span class="code-lang">').text(language));
  copyElm.append(copyButton);
+ // 添加一个元素取消浮动
+ copyElm.append('<div style="clear: both;"></div>');
  $(this).prepend(copyElm);
 
  const copyBtn = $(this).find('button');

apps/blog/views.py

@@ -6,14 +6,29 @@
 from .utils import site_full_url
 from django.core.cache import cache
 
-from markdown.extensions.toc import TocExtension # 锚点的拓展
 import markdown
-import time, datetime
+from markdown.extensions.toc import TocExtension # 锚点的拓展
+from pygments.formatters import HtmlFormatter
+from markdown.extensions.codehilite import CodeHiliteExtension
+import time
 
 from haystack.generic_views import SearchView # 导入搜索视图
 from haystack.query import SearchQuerySet
 
 
+class CustomHtmlFormatter(HtmlFormatter):
+ def __init__(self, lang_str='', **options):
+ super().__init__(**options)
+ # lang_str has the value {lang_prefix}{lang}
+ # specified by the CodeHilite's options
+ self.lang_str = lang_str
+
+ def _wrap_code(self, source):
+ yield 0, f'<code class="{self.lang_str}">'
+ yield from source
+ yield 0, '</code>'
+
+
 # Create your views here.
 
 def goview(request):
@@ -73,7 +88,8 @@ def get_object(self):
  else:
  md = markdown.Markdown(extensions=[
  'markdown.extensions.extra',
- 'markdown.extensions.codehilite',
+ # 'markdown.extensions.codehilite',
+ CodeHiliteExtension(pygments_formatter=CustomHtmlFormatter),
  TocExtension(slugify=slugify),
  ])
  obj.body = md.convert(obj.body)

requirements.txt

@@ -15,13 +15,13 @@ gunicorn==19.9.0
 html5lib==1.0.1
 idna==2.8
 jieba==0.39
-Markdown==3.1.1
+Markdown==3.4.3
 mysqlclient==1.4.4
 oauthlib==3.1.0
 olefile==0.46
 pilkit==2.0
+Pygments==2.15.1
 Pillow==9.3.0
-Pygments==2.7.4
 PyMySQL==0.9.3
 python3-openid==3.1.0
 pytz==2019.2