完成了标题图和标签的修改，并新增了富文本编辑器的功能和高亮代码的插件，接下来做一些前端（回到顶部等）

MyBlog/MyBlog/settings.py

@@ -40,6 +40,7 @@ INSTALLED_APPS = [
     'password_reset',
     'comment',
     'taggit',
+    'ckeditor',
 ]
 
 MIDDLEWARE = [
@@ -136,3 +137,33 @@ DEFAULT_FROM_EMAIL = 'Shellmiao的博客 <Shellmiao@shellmiao.com>'
 
 MEDIA_URL = '/media/'
 MEDIA_ROOT = os.path.join(BASE_DIR, 'media/')
+
+CKEDITOR_CONFIGS = {
+    # django-ckeditor默认使用default配置
+    'default': {
+        # 编辑器宽度自适应
+        'width': 'auto',
+        'height': '250px',
+        # tab键转换空格数
+        'tabSpaces': 4,
+        # 工具栏风格
+        'toolbar': 'Custom',
+        # 工具栏按钮
+        'toolbar_Custom': [
+            # 表情 代码块
+            ['Smiley', 'CodeSnippet'],
+            # 字体风格
+            ['Bold', 'Italic', 'Underline', 'RemoveFormat', 'Blockquote'],
+            # 字体颜色
+            ['TextColor', 'BGColor'],
+            # 链接
+            ['Link', 'Unlink'],
+            # 列表
+            ['NumberedList', 'BulletedList'],
+            # 最大化
+            ['Maximize']
+        ],
+        # 加入代码块插件
+        'extraPlugins': ','.join(['codesnippet', 'prism', 'widget', 'lineutils']),
+    }
+}

MyBlog/article/views.py

@@ -9,6 +9,7 @@ import markdown
 from .models import ArticlePost, ArticleColumn
 from .form import ArticlePostForm
 from comment.models import Comment
+from comment.forms import CommentPost
 
 
 # 视图函数
@@ -54,7 +55,8 @@ def article_detail(request, id):
             'markdown.extensions.toc'
         ])
     articles.body = md.convert(articles.body)
-    context = {'article': articles, 'toc': md.toc, 'comments': comments}
+    comment_form = CommentPost()
+    context = {'article': articles, 'toc': md.toc, 'comments': comments, 'comment_form': comment_form}
     return render(request, 'article/detail.html', context)
 
 
@@ -118,6 +120,9 @@ def article_update(request, id):
                     article.column = ArticleColumn.objects.get(id=request.POST['column'])
                 else:
                     article.column = None
+                if request.FILES.get('avatar'):
+                    article.avatar = request.FILES.get('avatar')
+                article.tags.set(*request.POST.get('tags').split(','), clear=True)
                 article.save()
                 return redirect("article:article_detail", id=id)
             else:
@@ -125,7 +130,8 @@ def article_update(request, id):
         else:
             article_post_form = ArticlePostForm()
             columns = ArticleColumn.objects.all()
-            context = {'article': article, 'article_post_form': article_post_form, 'columns': columns}
+            context = {'article': article, 'article_post_form': article_post_form, 'columns': columns,
+                       'tags': ','.join([x for x in article.tags.names()])}
             return render(request, 'article/update.html', context)
     else:
         return HttpResponse("你无权进行此操作")

MyBlog/comment/admin.py

@@ -1,3 +1,4 @@
 from django.contrib import admin
+from .models import Comment
 
-# Register your models here.
+admin.site.register(Comment)

MyBlog/comment/migrations/0003_auto_20210130_1958.py

@@ -0,0 +1,19 @@
+# Generated by Django 3.1.1 on 2021-01-30 11:58
+
+import ckeditor.fields
+from django.db import migrations
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('comment', '0002_auto_20210126_2310'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='comment',
+            name='body',
+            field=ckeditor.fields.RichTextField(),
+        ),
+    ]

MyBlog/comment/models.py

@@ -3,12 +3,13 @@ from django.contrib.auth.models import User
 from django.utils import timezone
 
 from article.models import ArticlePost
+from ckeditor.fields import RichTextField
 
 
 class Comment(models.Model):
     user = models.ForeignKey(User, on_delete=models.CASCADE, related_name='comment')
     article = models.ForeignKey(ArticlePost, on_delete=models.CASCADE, related_name='comment')
-    body = models.TextField()
+    body = RichTextField()
     created = models.DateTimeField(default=timezone.now)  # 使用timezone.now()时 进行数据迁移会，有警告
     updated = models.DateTimeField(default=timezone.now)
     total_views = models.PositiveIntegerField(default=0)

MyBlog/static/ckeditor/ckeditor/plugins/prism/Creating and Editing Code Snippets.txt

@@ -0,0 +1,22 @@
+CKEditor Prism Highlighter Plugin
+
+
+I. CREATING NEW PRISM CODE SNIPPET
+
+1.) Click the Code Snippet icon in the CKEditor Toolbar. The Dialog window will now pop-up.
+2.) Select the language that will be the basis for the syntax highlighting.
+3.) Input the code snippets to be highlighted.
+4.) Click the OK button.
+
+
+II. EDITING EXISTING PRISM CODE SNIPPET
+
+Just double-click the target code snippet block and its dialog window will pop-up.
+This happens since a code snippet is implemented as a widget in which by default
+has a mask/wrapper covering the entire widget block so that you could click in
+any part of it.
+
+
+Note that you could also copy and paste the existing code snippets for faster workflow
+since it will be already set in your desired programming language and you will just
+need to edit/set the contents.

MyBlog/static/ckeditor/ckeditor/plugins/prism/Installation Guide.txt

@@ -0,0 +1,263 @@
+I. OVERVIEW
+
+This Prism Highlighter plugin requires CKEditor 4.4 or later versions, and it extends
+the Code Snippet widget/plugin. It requires CKEditor 4.4 since the Code Snippet's mechanism
+for extending/overriding the highlighting engine is only available starting from that version.
+Hence, the Code Snippet plugin is also a hard dependency
+(which also depends on Widget and Line Utilities).
+
+In essence, we need to download these plugins:
+a. Widget (http://ckeditor.com/addon/widget)
+b. Line Utilities (http://ckeditor.com/addon/lineutils)
+c. Code Snippet (http://ckeditor.com/addon/codesnippet),
+d. Prism Highlighter plugin (http://ckeditor.com/addon/prism).
+
+For Linux users, after downloading, make sure that the zipped folders or the target CKEditor folders
+have right read/write/execute permissions, otherwise you might encounter loading issues
+like the "File x could not be found" notice. You might need to run "sudo chmod 777 -R lineutils",
+"sudo chmod 777 -R widget", "sudo chmod 777 -R codesnippet", and "sudo chmod 777 -R prism",
+before or after copying them in the appropriate CKEditor folders.
+
+After the installation (Part 2 for Non-Drupal, Part 3 for Drupal), read the important notes in part 4 also to avoid surprises.
+
+
+II. STANDARD INSTALLATION (Usual Setup)
+
+1) After unzipping the folder, paste the 4 folders
+    ("lineutils", "widget", "codesnippet", and "prism")
+    to "ckeditor/plugins" folder. After that, you should have the following folder structures:
+        "ckeditor/plugins/lineutils"
+        "ckeditor/plugins/widget"
+        "ckeditor/plugins/codesnippet"
+        "ckeditor/plugins/prism"
+
+2) Edit the "ckeditor/config.js" file, and add the following:
+    if there's no existing line yet:
+        config.extraPlugins = "lineutils,widget,codesnippet,prism";
+
+    otherwise, append it to the existing list, no extra spaces are allowed:
+        config.extraPlugins =
+            "existing_plugin,another_existing_plugin,lineutils,widget,codesnippet,prism";
+
+3.) Just to make sure, clear the web browser's cache after modifying your configuration.
+    Clearing the browser's cache is also very important
+    since the CKEditor's JS and CSS assets/components are cached also in the browser.
+
+
+III. DRUPAL INSTALLATION
+
+In Drupal, the typical/recommended way to embed the CKEditor WSYIWYG is
+through the CKEditor module (https://drupal.org/project/ckeditor),
+and then building/loading the corresponding CKEditor JS library (http://ckeditor.com/).
+
+Drupal's CKEditor module is typically installed to have this internal path:
+    sites/all/modules/ckeditor or sites/all/modules/contrib/ckeditor.
+
+Moreover, the CKEditor JS Library is typically installed to have this internal path:
+    "sites/all/modules/ckeditor/ckeditor/ckeditor.js" or
+    "sites/all/modules/contrib/ckeditor/ckeditor/ckeditor.js" or
+    "sites/all/libraries/ckeditor/ckeditor.js."
+
+With Drupal's latest CKEditor (https://www.drupal.org/project/ckeditor, 7.x-1.16),
+the Widget and Lineutils plugins are already bundled and enabled by default which is indicated
+as the "Full" CKEditor.js build if you check in the the CKEditor Global Profile admin page
+    "admin/config/content/ckeditor/editg"
+        Path to CKEditor: //cdn.ckeditor.com/4.4.3/full-all
+
+the path is pointing to the CDN copy/build of CKEditor 4.4.3 with Full Plugins,
+so the Widget and Lineutils plugins should not be downloaded anymore,
+including the Code Snippet (but Code Snippet must still be activated in
+the Drupal's CKEditor Configuration page since it's not activated by default);
+actually, conflicts and console error like this will show if you try to still download
+and integrate them into the setup:
+    Uncaught TypeError: CKEDITOR.tools.getIndex is not a function
+
+Hence, it is highly recommended that you use the latest Drupal CKEditor module
+since it would be the easiest to setup, especially in the context of Prism Highlighter plugin.
+
+Summary of Drupal's CKEditor 7.x-1.16 version:
+a. Widget and Line Utilities are already bundled and activated by default.
+b. Code Snippet is bundled but not activated
+c. Prism Highlighter must be downloaded and activated.
+
+The instructions below are guides on how to do (b) and (c) above.
+
+These are the possible plugin setups, the idea is to copy the plugin folder, enable it,
+and make it visible in the toolbar:
+
+A. DRUPAL INSTALLATION OPTION 1 (Easier Setup Than Option 2)
+
+    1.) Download and unzip the plugin here (depending on your setup):
+            "sites/all/modules/ckeditor/plugins" or
+            "sites/all/modules/contrib/ckeditor/plugins".
+
+        After that, you should have this folder structure:
+            "ckeditor/plugins/prism"
+
+    2.) We should now activate the new plugin and add them to the toolbar.
+        This is done by configuring the CKEditor Profile Settings,
+        in which by default is located in:
+            "admin/config/content/ckeditor/edit/Advanced"
+
+        A. Activate the Code Snippet and Prism Highlighter Plugins
+            In EDITOR APPEARANCE >>> Plugins section:
+            Enable the corresponding checkboxes for the Code Snippet and Prism Highlighter.
+            This is the text displayed adjacent to their checkboxes:
+                "Plugin for inserting Code Snippets ..."
+                "Plugin file: prism"
+
+        B. Add the Code Snippet plugin to the Toolbar
+            Prism Highlighter just overrides the highlighting engine (back-end)
+            of Code Snippet so it doesn't need another toolbar button/icon and
+            it could just utilize the existing one used by Code Snippet. In other words,
+            Prism Highlighter is just the Code Snippet plugin but with some overrides
+            under the hood.
+
+            Ultimately, we should then make the activated Code Snippet plugin visible in the toolbar,
+            skipping this step will make the Code Snippet plugin (and consequently Prism Highligher)
+            inaccessible in the toolbar.
+
+            In EDITOR APPEARANCE >>> Toolbar section:
+            Drag the Code Snippet icon (black-colored) from the 'All Buttons' section
+            to the 'Used Buttons' section.
+
+    3.) Then, click the Save button. Clear the Drupal's overall cache AND
+        clear the browser's cache. Clearing the browser's cache is also
+        very important since the CKEditor's JS and CSS assets/components
+        are cached also in the browser.
+
+    As indicated above, using the "sites/all/modules/ckeditor/plugins" or
+        "sites/all/modules/contrib/ckeditor/plugins"
+    will work with no additional custom hooks programming since by default
+    CKEditor utilize that folder in the CKEditor Global Profile Settings:
+        "admin/config/content/ckeditor/editg".
+
+    If you go that Global Profile Settings page, this will be indicated
+    (unless you override the default configuration):
+        Path to the CKEditor plugins directory: "%m/plugins"
+
+        In which "%m" refers to the base URL path where the CKEditor module is stored,
+        and defaults to "sites/all/modules/ckeditor" or "sites/all/modules/contrib/ckeditor".
+
+
+B. DRUPAL INSTALLATION OPTION 2
+
+    With the advent of Libraries API (https://drupal.org/project/libraries),
+    Drupal offers more flexibility in the handling of external/third-party libraries,
+    which means a clean mechanism that provides a separation of control between
+    the CKEditor module and CKEditor library, and implies that we could
+    safely upgrade the library and module independent to each other.
+    Having a Libraries folder (sites/all/libraries) is also a very common setup in Drupal.
+
+    This setup assumes that you've already installed and enabled the Libraries API module
+    and configured the CKEditor library (sites/all/libraries/ckeditor).
+    Make sure also that the "Path to CKEditor" settings indicated in
+    the CKEditor's Global Profile (admin/config/content/ckeditor/editg) is
+    indicated as "%l/ckeditor", in which "%l" refers to the "sites/all/libraries".
+
+    1.) Download and unzip the plugin here:
+            "sites/all/libraries/ckeditor/plugins"
+
+        After that, you should have this folder structure:
+            "ckeditor/plugins/prism"
+
+    2.) We should now activate the new plugin.
+        This is done by implementing first the hook_ckeditor_plugin() in a custom module:
+
+        function MYMODULE_ckeditor_plugin() {
+          return array(
+            'prism' => array(
+              'name' => 'prism',
+              'desc' => t('Prism Highlighter Plugin'),
+              'path' => libraries_get_path('ckeditor') . '/plugins/prism/',
+            ),
+          );
+        }
+
+        That hook will make it possible for the Prism Highlighter to show in
+        the Drupal's CKEditor Configuration page.
+
+    3.  We should now activate the new plugin and add them to the toolbar.
+        This is done by configuring the CKEditor Profile Settings,
+        in which by default is located in:
+            "admin/config/content/ckeditor/edit/Advanced"
+
+        A. Activate the Code Snippet and Prism Highlighter Plugins
+            In EDITOR APPEARANCE >>> Plugins section:
+            Enable the corresponding checkboxes for the Code Snippet and Prism Highlighter.
+            This is the text displayed adjacent to their checkboxes:
+                "Plugin for inserting Code Snippets ..."
+                "Prism Highlighter Plugin"
+
+        B. Add the Code Snippet plugin to the Toolbar
+            Prism Highlighter just overrides the highlighting engine (back-end)
+            of Code Snippet so it doesn't need another toolbar button/icon and
+            it could just utilize the existing one used by Code Snippet. In other words,
+            Prism Highlighter is just the Code Snippet plugin but with some overrides
+            under the hood.
+
+            Ultimately, we should then make the activated Code Snippet plugin visible in the toolbar,
+            skipping this step will make the Code Snippet plugin (and consequently Prism Highligher)
+            inaccessible in the toolbar.
+
+            In EDITOR APPEARANCE >>> Toolbar section:
+            Drag the Code Snippet icon (black-colored) from the 'All Buttons' section
+            to the 'Used Buttons' section.
+
+    4.) Then, click the Save button. Clear the Drupal's overall cache AND
+        clear the browser's cache. Clearing the browser's cache is also
+        very important since the CKEditor's JS and CSS assets/components
+        are cached also in the browser.
+
+
+IV. IMPORTANT NOTES
+
+    A. HTML (SECURITY) FILTERING ISSUES
+
+    Code Snippet/Prism Syntax Highlighter inserts <PRE><CODE>...</CODE></PRE> tags/blocks
+    in your webpages. The <PRE><CODE> is one of the main basis for the styling/syntax highlighting.
+    Yet, for some systems like Drupal, <PRE> tag is blacklisted by default
+    when filtering/rendering page contents (actually <pre><code> will become <p><code> when rendered).
+    In Drupal, <CODE> is allowed by default. Hence, you must allow/whitelist <PRE> tag in order for the syntax highlighter to work as intended. In Drupal, you should add the "<pre>"" tag
+    as one of the whitelisted tags in the
+        'Allowed HTML tags' section in 'Limit allowed HTML tags' filter/tab in
+            "admin/config/content/formats/filtered_html" page.
+
+    B. VIEWING THE PAGE
+
+    This syntax highlighter utilizes the Prism JS/CSS files in order to work as intended.
+
+    Typically, there are 2 view modes for every page in CMS: CKEditor Mode and Page Mode.
+    In CKEditor Mode (when editing the page), the Prism Highlighter handles the auto-loading
+    of Prism JS and CSS files. In Page Mode (when rendering/viewing the actual page),
+    Prism Highlighiter is not loaded anymore (since it depends on CKEditor.)
+
+    In effect, you have to load the Prism JS and CSS files when displaying the page.
+    You should add these link and script tags in your HTML <head>:
+        <head>
+            ...
+            <link href="PATH_TO/prism_patched.min.css" rel="stylesheet">
+
+            <script src="PATH_TO/prism_patched.min.js"></script>
+        </head>
+
+    For example, in my personal site I have these values:
+        <head>
+            ...
+            <link href=" http://ranelpadon.com/sites/all/libraries/ckeditor/plugins/prism/lib/prism/prism_patched.min.css" rel="stylesheet">
+
+            <script src=" http://ranelpadon.com/sites/all/libraries/ckeditor/plugins/prism/lib/prism/prism_patched.min.js"></script>
+        </head>
+
+    Note that even if you're not using Prism Syntax Highlighter, and just using
+    the Code Snippet plugin, you'll have to do the same steps:
+        http://docs.ckeditor.com/#!/guide/dev_codesnippet.
+
+    In Drupal, you could easily add the script using JS Injector module
+        https://www.drupal.org/project/js_injector
+
+    and for adding the stylesheet, you could use the CSS Injector module
+        https://www.drupal.org/project/css_injector
+
+    If you're a Drupal developer, you could do the JS/CSS insertions using the
+        drupal_add_js() and drupal_add_css() functions in a custom module.

MyBlog/static/ckeditor/ckeditor/plugins/prism/LICENSE.txt

@@ -0,0 +1,502 @@
+                  GNU LESSER GENERAL PUBLIC LICENSE
+                       Version 2.1, February 1999
+
+ Copyright (C) 1991, 1999 Free Software Foundation, Inc.
+ 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301  USA
+ Everyone is permitted to copy and distribute verbatim copies
+ of this license document, but changing it is not allowed.
+
+[This is the first released version of the Lesser GPL.  It also counts
+ as the successor of the GNU Library Public License, version 2, hence
+ the version number 2.1.]
+
+                            Preamble
+
+  The licenses for most software are designed to take away your
+freedom to share and change it.  By contrast, the GNU General Public
+Licenses are intended to guarantee your freedom to share and change
+free software--to make sure the software is free for all its users.
+
+  This license, the Lesser General Public License, applies to some
+specially designated software packages--typically libraries--of the
+Free Software Foundation and other authors who decide to use it.  You
+can use it too, but we suggest you first think carefully about whether
+this license or the ordinary General Public License is the better
+strategy to use in any particular case, based on the explanations below.
+
+  When we speak of free software, we are referring to freedom of use,
+not price.  Our General Public Licenses are designed to make sure that
+you have the freedom to distribute copies of free software (and charge
+for this service if you wish); that you receive source code or can get
+it if you want it; that you can change the software and use pieces of
+it in new free programs; and that you are informed that you can do
+these things.
+
+  To protect your rights, we need to make restrictions that forbid
+distributors to deny you these rights or to ask you to surrender these
+rights.  These restrictions translate to certain responsibilities for
+you if you distribute copies of the library or if you modify it.
+
+  For example, if you distribute copies of the library, whether gratis
+or for a fee, you must give the recipients all the rights that we gave
+you.  You must make sure that they, too, receive or can get the source
+code.  If you link other code with the library, you must provide
+complete object files to the recipients, so that they can relink them
+with the library after making changes to the library and recompiling
+it.  And you must show them these terms so they know their rights.
+
+  We protect your rights with a two-step method: (1) we copyright the
+library, and (2) we offer you this license, which gives you legal
+permission to copy, distribute and/or modify the library.
+
+  To protect each distributor, we want to make it very clear that
+there is no warranty for the free library.  Also, if the library is
+modified by someone else and passed on, the recipients should know
+that what they have is not the original version, so that the original
+author's reputation will not be affected by problems that might be
+introduced by others.
+
+  Finally, software patents pose a constant threat to the existence of
+any free program.  We wish to make sure that a company cannot
+effectively restrict the users of a free program by obtaining a
+restrictive license from a patent holder.  Therefore, we insist that
+any patent license obtained for a version of the library must be
+consistent with the full freedom of use specified in this license.
+
+  Most GNU software, including some libraries, is covered by the
+ordinary GNU General Public License.  This license, the GNU Lesser
+General Public License, applies to certain designated libraries, and
+is quite different from the ordinary General Public License.  We use
+this license for certain libraries in order to permit linking those
+libraries into non-free programs.
+
+  When a program is linked with a library, whether statically or using
+a shared library, the combination of the two is legally speaking a
+combined work, a derivative of the original library.  The ordinary
+General Public License therefore permits such linking only if the
+entire combination fits its criteria of freedom.  The Lesser General
+Public License permits more lax criteria for linking other code with
+the library.
+
+  We call this license the "Lesser" General Public License because it
+does Less to protect the user's freedom than the ordinary General
+Public License.  It also provides other free software developers Less
+of an advantage over competing non-free programs.  These disadvantages
+are the reason we use the ordinary General Public License for many
+libraries.  However, the Lesser license provides advantages in certain
+special circumstances.
+
+  For example, on rare occasions, there may be a special need to
+encourage the widest possible use of a certain library, so that it becomes
+a de-facto standard.  To achieve this, non-free programs must be
+allowed to use the library.  A more frequent case is that a free
+library does the same job as widely used non-free libraries.  In this
+case, there is little to gain by limiting the free library to free
+software only, so we use the Lesser General Public License.
+
+  In other cases, permission to use a particular library in non-free
+programs enables a greater number of people to use a large body of
+free software.  For example, permission to use the GNU C Library in
+non-free programs enables many more people to use the whole GNU
+operating system, as well as its variant, the GNU/Linux operating
+system.
+
+  Although the Lesser General Public License is Less protective of the
+users' freedom, it does ensure that the user of a program that is
+linked with the Library has the freedom and the wherewithal to run
+that program using a modified version of the Library.
+
+  The precise terms and conditions for copying, distribution and
+modification follow.  Pay close attention to the difference between a
+"work based on the library" and a "work that uses the library".  The
+former contains code derived from the library, whereas the latter must
+be combined with the library in order to run.
+
+                  GNU LESSER GENERAL PUBLIC LICENSE
+   TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION
+
+  0. This License Agreement applies to any software library or other
+program which contains a notice placed by the copyright holder or
+other authorized party saying it may be distributed under the terms of
+this Lesser General Public License (also called "this License").
+Each licensee is addressed as "you".
+
+  A "library" means a collection of software functions and/or data
+prepared so as to be conveniently linked with application programs
+(which use some of those functions and data) to form executables.
+
+  The "Library", below, refers to any such software library or work
+which has been distributed under these terms.  A "work based on the
+Library" means either the Library or any derivative work under
+copyright law: that is to say, a work containing the Library or a
+portion of it, either verbatim or with modifications and/or translated
+straightforwardly into another language.  (Hereinafter, translation is
+included without limitation in the term "modification".)
+
+  "Source code" for a work means the preferred form of the work for
+making modifications to it.  For a library, complete source code means
+all the source code for all modules it contains, plus any associated
+interface definition files, plus the scripts used to control compilation
+and installation of the library.
+
+  Activities other than copying, distribution and modification are not
+covered by this License; they are outside its scope.  The act of
+running a program using the Library is not restricted, and output from
+such a program is covered only if its contents constitute a work based
+on the Library (independent of the use of the Library in a tool for
+writing it).  Whether that is true depends on what the Library does
+and what the program that uses the Library does.
+
+  1. You may copy and distribute verbatim copies of the Library's
+complete source code as you receive it, in any medium, provided that
+you conspicuously and appropriately publish on each copy an
+appropriate copyright notice and disclaimer of warranty; keep intact
+all the notices that refer to this License and to the absence of any
+warranty; and distribute a copy of this License along with the
+Library.
+
+  You may charge a fee for the physical act of transferring a copy,
+and you may at your option offer warranty protection in exchange for a
+fee.
+
+  2. You may modify your copy or copies of the Library or any portion
+of it, thus forming a work based on the Library, and copy and
+distribute such modifications or work under the terms of Section 1
+above, provided that you also meet all of these conditions:
+
+    a) The modified work must itself be a software library.
+
+    b) You must cause the files modified to carry prominent notices
+    stating that you changed the files and the date of any change.
+
+    c) You must cause the whole of the work to be licensed at no
+    charge to all third parties under the terms of this License.
+
+    d) If a facility in the modified Library refers to a function or a
+    table of data to be supplied by an application program that uses
+    the facility, other than as an argument passed when the facility
+    is invoked, then you must make a good faith effort to ensure that,
+    in the event an application does not supply such function or
+    table, the facility still operates, and performs whatever part of
+    its purpose remains meaningful.
+
+    (For example, a function in a library to compute square roots has
+    a purpose that is entirely well-defined independent of the
+    application.  Therefore, Subsection 2d requires that any
+    application-supplied function or table used by this function must
+    be optional: if the application does not supply it, the square
+    root function must still compute square roots.)
+
+These requirements apply to the modified work as a whole.  If
+identifiable sections of that work are not derived from the Library,
+and can be reasonably considered independent and separate works in
+themselves, then this License, and its terms, do not apply to those
+sections when you distribute them as separate works.  But when you
+distribute the same sections as part of a whole which is a work based
+on the Library, the distribution of the whole must be on the terms of
+this License, whose permissions for other licensees extend to the
+entire whole, and thus to each and every part regardless of who wrote
+it.
+
+Thus, it is not the intent of this section to claim rights or contest
+your rights to work written entirely by you; rather, the intent is to
+exercise the right to control the distribution of derivative or
+collective works based on the Library.
+
+In addition, mere aggregation of another work not based on the Library
+with the Library (or with a work based on the Library) on a volume of
+a storage or distribution medium does not bring the other work under
+the scope of this License.
+
+  3. You may opt to apply the terms of the ordinary GNU General Public
+License instead of this License to a given copy of the Library.  To do
+this, you must alter all the notices that refer to this License, so
+that they refer to the ordinary GNU General Public License, version 2,
+instead of to this License.  (If a newer version than version 2 of the
+ordinary GNU General Public License has appeared, then you can specify
+that version instead if you wish.)  Do not make any other change in
+these notices.
+
+  Once this change is made in a given copy, it is irreversible for
+that copy, so the ordinary GNU General Public License applies to all
+subsequent copies and derivative works made from that copy.
+
+  This option is useful when you wish to copy part of the code of
+the Library into a program that is not a library.
+
+  4. You may copy and distribute the Library (or a portion or
+derivative of it, under Section 2) in object code or executable form
+under the terms of Sections 1 and 2 above provided that you accompany
+it with the complete corresponding machine-readable source code, which
+must be distributed under the terms of Sections 1 and 2 above on a
+medium customarily used for software interchange.
+
+  If distribution of object code is made by offering access to copy
+from a designated place, then offering equivalent access to copy the
+source code from the same place satisfies the requirement to
+distribute the source code, even though third parties are not
+compelled to copy the source along with the object code.
+
+  5. A program that contains no derivative of any portion of the
+Library, but is designed to work with the Library by being compiled or
+linked with it, is called a "work that uses the Library".  Such a
+work, in isolation, is not a derivative work of the Library, and
+therefore falls outside the scope of this License.
+
+  However, linking a "work that uses the Library" with the Library
+creates an executable that is a derivative of the Library (because it
+contains portions of the Library), rather than a "work that uses the
+library".  The executable is therefore covered by this License.
+Section 6 states terms for distribution of such executables.
+
+  When a "work that uses the Library" uses material from a header file
+that is part of the Library, the object code for the work may be a
+derivative work of the Library even though the source code is not.
+Whether this is true is especially significant if the work can be
+linked without the Library, or if the work is itself a library.  The
+threshold for this to be true is not precisely defined by law.
+
+  If such an object file uses only numerical parameters, data
+structure layouts and accessors, and small macros and small inline
+functions (ten lines or less in length), then the use of the object
+file is unrestricted, regardless of whether it is legally a derivative
+work.  (Executables containing this object code plus portions of the
+Library will still fall under Section 6.)
+
+  Otherwise, if the work is a derivative of the Library, you may
+distribute the object code for the work under the terms of Section 6.
+Any executables containing that work also fall under Section 6,
+whether or not they are linked directly with the Library itself.
+
+  6. As an exception to the Sections above, you may also combine or
+link a "work that uses the Library" with the Library to produce a
+work containing portions of the Library, and distribute that work
+under terms of your choice, provided that the terms permit
+modification of the work for the customer's own use and reverse
+engineering for debugging such modifications.
+
+  You must give prominent notice with each copy of the work that the
+Library is used in it and that the Library and its use are covered by
+this License.  You must supply a copy of this License.  If the work
+during execution displays copyright notices, you must include the
+copyright notice for the Library among them, as well as a reference
+directing the user to the copy of this License.  Also, you must do one
+of these things:
+
+    a) Accompany the work with the complete corresponding
+    machine-readable source code for the Library including whatever
+    changes were used in the work (which must be distributed under
+    Sections 1 and 2 above); and, if the work is an executable linked
+    with the Library, with the complete machine-readable "work that
+    uses the Library", as object code and/or source code, so that the
+    user can modify the Library and then relink to produce a modified
+    executable containing the modified Library.  (It is understood
+    that the user who changes the contents of definitions files in the
+    Library will not necessarily be able to recompile the application
+    to use the modified definitions.)
+
+    b) Use a suitable shared library mechanism for linking with the
+    Library.  A suitable mechanism is one that (1) uses at run time a
+    copy of the library already present on the user's computer system,
+    rather than copying library functions into the executable, and (2)
+    will operate properly with a modified version of the library, if
+    the user installs one, as long as the modified version is
+    interface-compatible with the version that the work was made with.
+
+    c) Accompany the work with a written offer, valid for at
+    least three years, to give the same user the materials
+    specified in Subsection 6a, above, for a charge no more
+    than the cost of performing this distribution.
+
+    d) If distribution of the work is made by offering access to copy
+    from a designated place, offer equivalent access to copy the above
+    specified materials from the same place.
+
+    e) Verify that the user has already received a copy of these
+    materials or that you have already sent this user a copy.
+
+  For an executable, the required form of the "work that uses the
+Library" must include any data and utility programs needed for
+reproducing the executable from it.  However, as a special exception,
+the materials to be distributed need not include anything that is
+normally distributed (in either source or binary form) with the major
+components (compiler, kernel, and so on) of the operating system on
+which the executable runs, unless that component itself accompanies
+the executable.
+
+  It may happen that this requirement contradicts the license
+restrictions of other proprietary libraries that do not normally
+accompany the operating system.  Such a contradiction means you cannot
+use both them and the Library together in an executable that you
+distribute.
+
+  7. You may place library facilities that are a work based on the
+Library side-by-side in a single library together with other library
+facilities not covered by this License, and distribute such a combined
+library, provided that the separate distribution of the work based on
+the Library and of the other library facilities is otherwise
+permitted, and provided that you do these two things:
+
+    a) Accompany the combined library with a copy of the same work
+    based on the Library, uncombined with any other library
+    facilities.  This must be distributed under the terms of the
+    Sections above.
+
+    b) Give prominent notice with the combined library of the fact
+    that part of it is a work based on the Library, and explaining
+    where to find the accompanying uncombined form of the same work.
+
+  8. You may not copy, modify, sublicense, link with, or distribute
+the Library except as expressly provided under this License.  Any
+attempt otherwise to copy, modify, sublicense, link with, or
+distribute the Library is void, and will automatically terminate your
+rights under this License.  However, parties who have received copies,
+or rights, from you under this License will not have their licenses
+terminated so long as such parties remain in full compliance.
+
+  9. You are not required to accept this License, since you have not
+signed it.  However, nothing else grants you permission to modify or
+distribute the Library or its derivative works.  These actions are
+prohibited by law if you do not accept this License.  Therefore, by
+modifying or distributing the Library (or any work based on the
+Library), you indicate your acceptance of this License to do so, and
+all its terms and conditions for copying, distributing or modifying
+the Library or works based on it.
+
+  10. Each time you redistribute the Library (or any work based on the
+Library), the recipient automatically receives a license from the
+original licensor to copy, distribute, link with or modify the Library
+subject to these terms and conditions.  You may not impose any further
+restrictions on the recipients' exercise of the rights granted herein.
+You are not responsible for enforcing compliance by third parties with
+this License.
+
+  11. If, as a consequence of a court judgment or allegation of patent
+infringement or for any other reason (not limited to patent issues),
+conditions are imposed on you (whether by court order, agreement or
+otherwise) that contradict the conditions of this License, they do not
+excuse you from the conditions of this License.  If you cannot
+distribute so as to satisfy simultaneously your obligations under this
+License and any other pertinent obligations, then as a consequence you
+may not distribute the Library at all.  For example, if a patent
+license would not permit royalty-free redistribution of the Library by
+all those who receive copies directly or indirectly through you, then
+the only way you could satisfy both it and this License would be to
+refrain entirely from distribution of the Library.
+
+If any portion of this section is held invalid or unenforceable under any
+particular circumstance, the balance of the section is intended to apply,
+and the section as a whole is intended to apply in other circumstances.
+
+It is not the purpose of this section to induce you to infringe any
+patents or other property right claims or to contest validity of any
+such claims; this section has the sole purpose of protecting the
+integrity of the free software distribution system which is
+implemented by public license practices.  Many people have made
+generous contributions to the wide range of software distributed
+through that system in reliance on consistent application of that
+system; it is up to the author/donor to decide if he or she is willing
+to distribute software through any other system and a licensee cannot
+impose that choice.
+
+This section is intended to make thoroughly clear what is believed to
+be a consequence of the rest of this License.
+
+  12. If the distribution and/or use of the Library is restricted in
+certain countries either by patents or by copyrighted interfaces, the
+original copyright holder who places the Library under this License may add
+an explicit geographical distribution limitation excluding those countries,
+so that distribution is permitted only in or among countries not thus
+excluded.  In such case, this License incorporates the limitation as if
+written in the body of this License.
+
+  13. The Free Software Foundation may publish revised and/or new
+versions of the Lesser General Public License from time to time.
+Such new versions will be similar in spirit to the present version,
+but may differ in detail to address new problems or concerns.
+
+Each version is given a distinguishing version number.  If the Library
+specifies a version number of this License which applies to it and
+"any later version", you have the option of following the terms and
+conditions either of that version or of any later version published by
+the Free Software Foundation.  If the Library does not specify a
+license version number, you may choose any version ever published by
+the Free Software Foundation.
+
+  14. If you wish to incorporate parts of the Library into other free
+programs whose distribution conditions are incompatible with these,
+write to the author to ask for permission.  For software which is
+copyrighted by the Free Software Foundation, write to the Free
+Software Foundation; we sometimes make exceptions for this.  Our
+decision will be guided by the two goals of preserving the free status
+of all derivatives of our free software and of promoting the sharing
+and reuse of software generally.
+
+                            NO WARRANTY
+
+  15. BECAUSE THE LIBRARY IS LICENSED FREE OF CHARGE, THERE IS NO
+WARRANTY FOR THE LIBRARY, TO THE EXTENT PERMITTED BY APPLICABLE LAW.
+EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT HOLDERS AND/OR
+OTHER PARTIES PROVIDE THE LIBRARY "AS IS" WITHOUT WARRANTY OF ANY
+KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO, THE
+IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+PURPOSE.  THE ENTIRE RISK AS TO THE QUALITY AND PERFORMANCE OF THE
+LIBRARY IS WITH YOU.  SHOULD THE LIBRARY PROVE DEFECTIVE, YOU ASSUME
+THE COST OF ALL NECESSARY SERVICING, REPAIR OR CORRECTION.
+
+  16. IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN
+WRITING WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MAY MODIFY
+AND/OR REDISTRIBUTE THE LIBRARY AS PERMITTED ABOVE, BE LIABLE TO YOU
+FOR DAMAGES, INCLUDING ANY GENERAL, SPECIAL, INCIDENTAL OR
+CONSEQUENTIAL DAMAGES ARISING OUT OF THE USE OR INABILITY TO USE THE
+LIBRARY (INCLUDING BUT NOT LIMITED TO LOSS OF DATA OR DATA BEING
+RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR THIRD PARTIES OR A
+FAILURE OF THE LIBRARY TO OPERATE WITH ANY OTHER SOFTWARE), EVEN IF
+SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF SUCH
+DAMAGES.
+
+                     END OF TERMS AND CONDITIONS
+
+           How to Apply These Terms to Your New Libraries
+
+  If you develop a new library, and you want it to be of the greatest
+possible use to the public, we recommend making it free software that
+everyone can redistribute and change.  You can do so by permitting
+redistribution under these terms (or, alternatively, under the terms of the
+ordinary General Public License).
+
+  To apply these terms, attach the following notices to the library.  It is
+safest to attach them to the start of each source file to most effectively
+convey the exclusion of warranty; and each file should have at least the
+"copyright" line and a pointer to where the full notice is found.
+
+    <one line to give the library's name and a brief idea of what it does.>
+    Copyright (C) <year>  <name of author>
+
+    This library is free software; you can redistribute it and/or
+    modify it under the terms of the GNU Lesser General Public
+    License as published by the Free Software Foundation; either
+    version 2.1 of the License, or (at your option) any later version.
+
+    This library is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+    Lesser General Public License for more details.
+
+    You should have received a copy of the GNU Lesser General Public
+    License along with this library; if not, write to the Free Software
+    Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301  USA
+
+Also add information on how to contact you by electronic and paper mail.
+
+You should also get your employer (if you work as a programmer) or your
+school, if any, to sign a "copyright disclaimer" for the library, if
+necessary.  Here is a sample; alter the names:
+
+  Yoyodyne, Inc., hereby disclaims all copyright interest in the
+  library `Frob' (a library for tweaking knobs) written by James Random Hacker.
+
+  <signature of Ty Coon>, 1 April 1990
+  Ty Coon, President of Vice
+
+That's all there is to it!

MyBlog/static/ckeditor/ckeditor/plugins/prism/README.md

@@ -0,0 +1,38 @@
+ckeditor-prism
+================
+<strong>OVERVIEW</strong>:<br>
+<a href="http://ckeditor.com/addon/prism">Prism Highlighter</a> is a plugin for <a href="http://ckeditor.com">CKEditor</a> for inserting beautiful formatted text, markdown, or code snippets in your blog or website. Prism is the chosen renderer/highlighter/colorizer since it's pretty, lightweight, and extendable. I also use this plugin in my [personal website](http://www.ranelpadon.com/content/practical-regex-part-12-common-operators).
+
+This plugin utilizes the following libraries: <br>
+<ul>
+  <li><a href="http://ckeditor.com/addon/codesnippet">CKEditor Code Snippet Plugin</a></li>
+    <li><a href="http://docs.ckeditor.com/#!/api/CKEDITOR.plugins.codesnippet.highlighter">CKEditor Code Snippet API</a></li>
+  <li><a href="http://prismjs.com/">Prism Syntax Highlighter with Dark Theme</a></li>
+  <li><a href="http://prismjs.com/plugins/line-numbers/">Prism Line Numbers Add-on</a></li>
+</ul>
+
+By default, Prism has no line numbering mechanism, so the **Line Number** add-on has been added. Also, in order for the line numbers to work smoothly in CKEditor and when rendering the actual page, I did some minor patching in **prism.js** and **prism.css**.
+
+<strong>LIVE DEMO PAGE</strong>:<br>
+Demo page could be found <a href="http://www.ranelpadon.com/sites/all/libraries/ckeditor/plugins/prism/demo/index.html">here</a>.
+
+<strong>INSTALLATION</strong>:<br>
+Kindly refer to <a href="https://github.com/ranelpadon/ckeditor-prism/blob/master/Installation%20Guide.txt">Installation Guide</a>.
+
+<strong>HOW TO USE</strong>:<br>
+Kindly refer to <a href="https://github.com/ranelpadon/ckeditor-prism/blob/master/Creating%20and%20Editing%20Code%20Snippets.txt">How to Create and Edit Prism Snippets</a>.
+
+<strong>LICENSE and CREDITS</strong>:<br>
+License: <a href="https://www.gnu.org/licenses/lgpl-2.1.txt">LGPLv2.1</a> or later should apply. Note that LGPLv2.1+ is also compatible with <a href="https://www.drupal.org/node/1475972#gplv2-compatible-licenses">GPLv2</a>.<br>
+Copyright 2015 by [Engr. Ranel O. Padon](http://www.ranelpadon.com)<br>
+
+Thanks to CKEditor, Prism, and other great open-source softwares and their unsung developers.<br>
+
+=======================================================
+
+
+
+
+
+
+

MyBlog/static/ckeditor/ckeditor/plugins/prism/plugin.js

@@ -0,0 +1,130 @@
+/**
+ * @license Copyright (c) 2003-2015, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or http://ckeditor.com/license
+ */
+
+/**
+ * @fileOverview Rich code snippets for CKEditor.
+ */
+
+'use strict';
+
+(function() {
+  // Create a new plugin which registers a custom code highlighter
+  // based on Prism.js in order to replace the one that comes
+  // with the Code Snippet plugin.
+  CKEDITOR.plugins.add('prism', {
+    requires: 'codesnippet',
+
+    init: function(editor) {
+      var path = this.path;
+
+      // Loading the prism.js style file.
+      // Idea taken from codesnippet/plugin.js code.
+      // Method is available only if wysiwygarea exists and
+      // CKEditor is at least version 4.4.
+      if (editor.addContentsCss) {
+        editor.addContentsCss(path + 'lib/prism/prism_patched.min.css');
+      }
+
+      // Create a new instance of the highlighter.
+      var prismHighlighter = new CKEDITOR.plugins.codesnippet.highlighter({
+        init: function(ready) {
+          // Load the Prism.js library asynchronously.
+          CKEDITOR.scriptLoader.load(path + 'lib/prism/prism_patched.min.js', function() {
+            // Notify the handler that the library has been loaded.
+            ready();
+          });
+        },
+
+        // Specify the supported languages.
+        languages: {
+          abap: 'ABAP',
+          actionscript: 'ActionScript',
+          apacheconf: 'Apache Conf',
+          applescript: 'AppleScript',
+          aspnet: 'ASP.NET',
+          bash: 'Bash',
+          basic: 'BASIC',
+          c: 'C',
+          coffeescript: 'CoffeeScript',
+          cpp: 'C++',
+          csharp: 'C#',
+          css: 'CSS',
+          d: 'D',
+          dart: 'Dart',
+          diff: 'Diff',
+          docker: 'Docker',
+          erlang: 'Erlang',
+          fortran: 'Fortran',
+          fsharp: 'F#',
+          git: 'Git',
+          go: 'Go',
+          groovy: 'Groovy',
+          haskell: 'Haskell',
+          markup: 'HTML',
+          http: 'HTTP',
+          ini: 'INI',
+          java: 'Java',
+          javascript: 'JavaScript',
+          lua: 'Lua',
+          makefile: 'Makefile',
+          markdown: 'Markdown',
+          matlab: 'MATLAB',
+          nginx: 'Nginx',
+          objectivec: 'Objective-C',
+          pascal: 'Pascal',
+          perl: 'Perl',
+          php: 'PHP',
+          prolog: 'Prolog',
+          python: 'Python',
+          puppet: 'Puppet',
+          r: 'R',
+          ruby: 'Ruby',
+          rust: 'Rust',
+          sas: 'SAS',
+          scala: 'Scala',
+          scheme: 'Scheme',
+          sql: 'SQL',
+          swift: 'Swift',
+          twig: 'Twig',
+          vim: 'vim',
+          yaml: 'YAML',
+        },
+
+        highlighter: function(code, language, callback) {
+          // _self.Prism is a global namespace/object created by Prism.js.
+          var _prism = _self.Prism;
+
+          // Let the Prism.js highlight the code.
+          var highlightedCode = _prism.highlight(code, _prism.languages[language], language);
+
+          // The clever idea below is taken from the 'Line Numbers' plugin
+          // of Prism. Basically, we want to count the number of newlines (\n)
+          // in the highlighted code, then create the same number
+          // of SPAN elements, append them to the highlighted code
+          // and finally number/label them using prism.css.
+          var match = highlightedCode.match(/\n(?!$)/g);
+          var linesNum = match ? match.length + 1 : 1;
+
+          var lines = new Array(linesNum + 1);
+          lines = lines.join('<span></span>');
+
+          // Create the SPAN root/wrapper, insert its child SPAN lines,
+          // then append them to the highlighted code.
+          var lineNumbersWrapper = '<span class="line-numbers-rows">';
+          lineNumbersWrapper += lines;
+          lineNumbersWrapper += '</span>';
+          highlightedCode += lineNumbersWrapper;
+
+          // Return highlighted code.
+          callback(highlightedCode);
+        }
+      });
+
+      // From now on, prismHighlighter will be used as a Code Snippet
+      // highlighter, overwriting the default engine.
+      editor.plugins.codesnippet.setHighlighter(prismHighlighter );
+    }
+  });
+})();

MyBlog/static/prism/prism.css

@@ -0,0 +1,167 @@
+/* PrismJS 1.23.0
+https://prismjs.com/download.html#themes=prism-okaidia&languages=markup+css+clike+javascript+abap+abnf+actionscript+ada+agda+al+antlr4+apacheconf+apex+apl+applescript+aql+arduino+arff+asciidoc+aspnet+asm6502+autohotkey+autoit+bash+basic+batch+bbcode+birb+bison+bnf+brainfuck+brightscript+bro+bsl+c+csharp+cpp+chaiscript+cil+clojure+cmake+coffeescript+concurnas+csp+crystal+css-extras+cypher+d+dart+dataweave+dax+dhall+diff+django+dns-zone-file+docker+dot+ebnf+editorconfig+eiffel+ejs+elixir+elm+etlua+erb+erlang+excel-formula+fsharp+factor+firestore-security-rules+flow+fortran+ftl+gml+gcode+gdscript+gedcom+gherkin+git+glsl+go+graphql+groovy+haml+handlebars+haskell+haxe+hcl+hlsl+http+hpkp+hsts+ichigojam+icon+ignore+inform7+ini+io+j+java+javadoc+javadoclike+javastacktrace+jolie+jq+jsdoc+js-extras+json+json5+jsonp+jsstacktrace+js-templates+julia+keyman+kotlin+latex+latte+less+lilypond+liquid+lisp+livescript+llvm+lolcode+lua+makefile+markdown+markup-templating+matlab+mel+mizar+mongodb+monkey+moonscript+n1ql+n4js+nand2tetris-hdl+naniscript+nasm+neon+nginx+nim+nix+nsis+objectivec+ocaml+opencl+oz+parigp+parser+pascal+pascaligo+psl+pcaxis+peoplecode+perl+php+phpdoc+php-extras+plsql+powerquery+powershell+processing+prolog+promql+properties+protobuf+pug+puppet+pure+purebasic+purescript+python+q+qml+qore+r+racket+jsx+tsx+reason+regex+renpy+rest+rip+roboconf+robotframework+ruby+rust+sas+sass+scss+scala+scheme+shell-session+smali+smalltalk+smarty+sml+solidity+solution-file+soy+sparql+splunk-spl+sqf+sql+squirrel+stan+iecst+stylus+swift+t4-templating+t4-cs+t4-vb+tap+tcl+tt2+textile+toml+turtle+twig+typescript+typoscript+unrealscript+uri+v+vala+vbnet+velocity+verilog+vhdl+vim+visual-basic+warpscript+wasm+wiki+xeora+xml-doc+xojo+xquery+yaml+yang+zig&plugins=line-numbers */
+/**
+ * okaidia theme for JavaScript, CSS and HTML
+ * Loosely based on Monokai textmate theme by http://www.monokai.nl/
+ * @author ocodia
+ */
+
+code[class*="language-"],
+pre[class*="language-"] {
+	color: #f8f8f2;
+	background: none;
+	text-shadow: 0 1px rgba(0, 0, 0, 0.3);
+	font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+	font-size: 1em;
+	text-align: left;
+	white-space: pre;
+	word-spacing: normal;
+	word-break: normal;
+	word-wrap: normal;
+	line-height: 1.5;
+
+	-moz-tab-size: 4;
+	-o-tab-size: 4;
+	tab-size: 4;
+
+	-webkit-hyphens: none;
+	-moz-hyphens: none;
+	-ms-hyphens: none;
+	hyphens: none;
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+	padding: 1em;
+	margin: .5em 0;
+	overflow: auto;
+	border-radius: 0.3em;
+}
+
+:not(pre) > code[class*="language-"],
+pre[class*="language-"] {
+	background: #272822;
+}
+
+/* Inline code */
+:not(pre) > code[class*="language-"] {
+	padding: .1em;
+	border-radius: .3em;
+	white-space: normal;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+	color: #8292a2;
+}
+
+.token.punctuation {
+	color: #f8f8f2;
+}
+
+.token.namespace {
+	opacity: .7;
+}
+
+.token.property,
+.token.tag,
+.token.constant,
+.token.symbol,
+.token.deleted {
+	color: #f92672;
+}
+
+.token.boolean,
+.token.number {
+	color: #ae81ff;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+	color: #a6e22e;
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string,
+.token.variable {
+	color: #f8f8f2;
+}
+
+.token.atrule,
+.token.attr-value,
+.token.function,
+.token.class-name {
+	color: #e6db74;
+}
+
+.token.keyword {
+	color: #66d9ef;
+}
+
+.token.regex,
+.token.important {
+	color: #fd971f;
+}
+
+.token.important,
+.token.bold {
+	font-weight: bold;
+}
+.token.italic {
+	font-style: italic;
+}
+
+.token.entity {
+	cursor: help;
+}
+
+pre[class*="language-"].line-numbers {
+	position: relative;
+	padding-left: 3.8em;
+	counter-reset: linenumber;
+}
+
+pre[class*="language-"].line-numbers > code {
+	position: relative;
+	white-space: inherit;
+}
+
+.line-numbers .line-numbers-rows {
+	position: absolute;
+	pointer-events: none;
+	top: 0;
+	font-size: 100%;
+	left: -3.8em;
+	width: 3em; /* works for line-numbers below 1000 lines */
+	letter-spacing: -1px;
+	border-right: 1px solid #999;
+
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+
+}
+
+	.line-numbers-rows > span {
+		display: block;
+		counter-increment: linenumber;
+	}
+
+		.line-numbers-rows > span:before {
+			content: counter(linenumber);
+			color: #999;
+			display: block;
+			padding-right: 0.8em;
+			text-align: right;
+		}
+

MyBlog/templates/article/detail.html

@@ -17,6 +17,7 @@
                 <h1 class="mt-4 mb-4">
                     {{ article.title }}
                 </h1>
+
                 <div class="col-12 alert alert-success">
                     作者: {{ article.author }}
                     {% if user == article.author %}
@@ -41,6 +42,15 @@
                         </button>
                     </form>
                 </div>
+                {% if article.avatar %}
+                    <div class="row mt-2">
+                        <img src="{{ article.avatar.url }}"
+                             alt="avatar"
+                             style="max-width: 100%; border-radius: 20px;"
+                        >
+                    </div>
+                    <hr/>
+                {% endif %}
                 <div class="col-12">
                     <p>
                         {{ article.body|safe }}
@@ -57,7 +67,11 @@
                                         发表评论
                                     </strong>
                                 </label>
-                                <textarea type="text" class="form-control" id="body" name="body" rows="2"></textarea>
+                                <!--<textarea type="text" class="form-control" id="body" name="body" rows="2"></textarea>-->
+                                <div>
+                                    {{ comment_form.media }}
+                                    {{ comment_form.body }}
+                                </div>
                             </div>
                             <button type="submit" class="btn btn-primary">发送</button>
                         </form>
@@ -83,7 +97,7 @@
                     </span>时评论道:
                         </p>
                         <pre style="font-family: inherit;font-size: 1em;">
-                    {{ comment.body }}
+                    {{ comment.body|safe }}
                 </pre>
                     {% endfor %}
                 </div>
@@ -102,4 +116,11 @@
             })
         }
     </script>
-{% endblock content %}
+    <script src="{% static 'ckeditor/ckeditor/plugins/prism/lib/prism/prism_patched.min.js' %}"></script>
+    <link rel="stylesheet" href="{% static 'prism/prism.css' %}">
+{% endblock content %}
+{% block script %}
+<script>
+    $(".django-ckeditor-widget").removeAttr('style');
+</script>
+{% endblock script %}

MyBlog/templates/article/update.html

@@ -8,7 +8,7 @@
         <div class="row">
             <div class="col-12">
                 <br>
-                <form method="post" action=".">
+                <form method="post" action="." enctype="multipart/form-data">
                     {% csrf_token %}
                     <div class="form-group">
                         <label for="title">
@@ -17,6 +17,9 @@
                         <input type="text" class="form-control" id="title" name="title" value="{{ article.title }}">
                     </div>
                     {% if article.avatar %}
+                        <label for="body">
+                            标题图
+                        </label>
                         <div class="col-3">
                             <img src="{{ article.avatar.url }}"
                                  alt="avatar"
@@ -47,6 +50,11 @@
                             {% endfor %}
                         </select>
                     </div>
+                    <!--标签-->
+                    <div class="form-group">
+                        <label for="tags">标签</label>
+                        <input type="text" class="form-control col-3" id="tags" name="tags" value="{{ tags }}">
+                    </div>
                     <div class="form-group">
                         <label for="body">
                             文章正文

MyBlog/templates/base.html

@@ -20,5 +20,7 @@
 <script src="{% static 'layer/layer.js' %}"></script>
 <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1-lts/dist/umd/popper.min.js"></script>
 <script src="{% static 'bootstrap/js/bootstrap.min.js' %}"></script>
+{% block script %}
+{% endblock script %}
 </body>
 </html>