Merge pull request #992 from AlisProject/ALIS-5076

ALIS-5076: Add code block

app/assets/stylesheets/ckeditor-view.scss

@@ -53,12 +53,17 @@
       font-style: normal;
     }
 
+    pre {
+      max-width: 640px;
+    }
+
     img {
       max-width: 100%;
     }
 
     .image {
       margin: 24px 0;
+      display: block;
 
       > figcaption {
         color: #666;
@@ -239,6 +244,10 @@
         padding: 8px 20px;
       }
 
+      pre {
+        max-width: calc(100vw - 36px - 32px);
+      }
+
       .image {
         margin: 20px 0;
 

app/assets/stylesheets/ckeditor.scss

@@ -75,24 +75,28 @@
     background: none;
   }
 
-  &.ck-editor__is-empty:not(.ck-focused):before {
-    color: #898989;
-    content: '本文を入力してください';
-    cursor: text;
-    display: block;
-    margin: 16px 0;
-    position: absolute;
-  }
-
   .media {
     margin: 1em 3px;
   }
 }
 
+#ALISEditor:not([data-empty="false"]) .ck-editor__is-empty:not(.ck-focused):before {
+  color: #898989;
+  content: '本文を入力してください';
+  cursor: text;
+  display: block;
+  margin: 16px 0;
+  position: absolute;
+}
+
 .area-editor-container {
   .ck-content {
+    outline: none;
+
     .image {
       margin: 24px 3px;
+      display: block;
+      overflow: hidden;
     }
 
     .image-style-align-right {

app/assets/stylesheets/gruvbox-dark-modified.css

@@ -0,0 +1,115 @@
+/*
+
+Gruvbox style (dark) (c) Pavel Pertsev (original style at https://github.com/morhetz/gruvbox)
+
+*/
+
+.ck-content pre {
+    background: #282828;
+    overflow-x: auto;
+    word-wrap: normal;
+    white-space: pre;
+    clear:both;
+}
+
+.ck-content pre code {
+  display: block;
+  padding: 0em;
+  background: #282828;
+}
+
+.ck-content pre code,
+.hljs-subst {
+    color: #ebdbb2;
+}
+
+/* Gruvbox Red */
+.hljs-deletion,
+.hljs-formula,
+.hljs-keyword,
+.hljs-link,
+.hljs-selector-tag {
+  color: #fb4934;
+}
+
+/* Gruvbox Blue */
+.hljs-built_in,
+.hljs-emphasis,
+.hljs-name,
+.hljs-quote,
+.hljs-strong,
+.hljs-title,
+.hljs-variable {
+  color: #83a598;
+}
+
+/* Gruvbox Yellow */
+.hljs-attr,
+.hljs-params,
+.hljs-template-tag,
+.hljs-type {
+  color: #fabd2f;
+}
+
+/* Gruvbox Purple */
+.hljs-builtin-name,
+.hljs-doctag,
+.hljs-literal,
+.hljs-number {
+  color: #8f3f71;
+}
+
+/* Gruvbox Orange */
+.hljs-code,
+.hljs-meta,
+.hljs-regexp,
+.hljs-selector-id,
+.hljs-template-variable {
+  color: #fe8019;
+}
+
+/* Gruvbox Green */
+.hljs-addition,
+.hljs-meta-string,
+.hljs-section,
+.hljs-selector-attr,
+.hljs-selector-class,
+.hljs-string,
+.hljs-symbol {
+  color: #b8bb26;
+}
+
+/* Gruvbox Aqua */
+.hljs-attribute,
+.hljs-bullet,
+.hljs-class,
+.hljs-function,
+.hljs-function .hljs-keyword,
+.hljs-meta-keyword,
+.hljs-selector-pseudo,
+.hljs-tag {
+  color: #8ec07c;
+}
+
+/* Gruvbox Gray */
+.hljs-comment {
+  color: #928374;
+}
+
+/* Gruvbox Purple */
+.hljs-link_label,
+.hljs-literal,
+.hljs-number {
+  color: #d3869b;
+}
+
+.hljs-comment,
+.hljs-emphasis {
+  font-style: italic;
+}
+
+.hljs-section,
+.hljs-strong,
+.hljs-tag {
+  font-weight: bold;
+}

app/components/pages/ArticleDetailV2.vue

@@ -8,7 +8,7 @@
       <h1 class="area-title">
         {{ decodedTitle }}
       </h1>
-      <div class="area-content ck-content" v-html="article.body" />
+      <div class="area-content ck-content" v-html="body" />
       <no-ssr>
         <article-detail-paypart v-if="isShowPaypart" :article="article" />
       </no-ssr>
@@ -35,6 +35,8 @@
 
 <script>
 import { mapGetters, mapActions } from 'vuex'
+import hljs from 'highlight.js'
+import cheerio from 'cheerio'
 import AppHeader from '../organisms/AppHeader'
 import ArticleHeader from '../organisms/ArticleHeader'
 import ArticleFooterActions from '../atoms/ArticleFooterActions'
@@ -83,6 +85,24 @@ export default {
     this.resetArticleCommentsLastEvaluatedKey()
   },
   computed: {
+    body() {
+      let highlightedArticleBody = this.article.body
+      try {
+        const $ = cheerio.load(`<div id="outerHTML">${this.article.body}</div>`)
+        $('code').each(function() {
+          const language = $(this)
+            .attr('class')
+            .split('-')
+            .slice(1)
+            .join('-')
+          $(this).html(htmlDecode(hljs.highlight(language, $(this).html()).value))
+        })
+        highlightedArticleBody = $('#outerHTML').html()
+      } catch (e) {
+        /* 記事のパースでエラーが起きた場合元のbodyをそのまま返す */
+      }
+      return highlightedArticleBody
+    },
     decodedTitle() {
       return htmlDecode(this.article.title)
     },

nuxt.config.js

@@ -1,4 +1,5 @@
 const axiosRetry = require('axios-retry')
+const CKEditorStyles = require('@ckeditor/ckeditor5-dev-utils').styles
 
 module.exports = {
   /*
@@ -121,6 +122,17 @@ module.exports = {
     }
   },
   build: {
+    /**
+     * この postcss 設定を足さないと CKEditor5 ^16.0.0 で build された
+     * AlisEditor.css の parse にシンタックスエラーが起きる
+     */
+    postcss: CKEditorStyles.getPostCssConfig({
+      themeImporter: {
+        themePath: require.resolve('@ckeditor/ckeditor5-theme-lark')
+      },
+      minify: true
+    }),
+
     publicPath: `https://${process.env.ALIS_APP_DOMAIN}/d/nuxt/dist/`,
     /*
      ** Run ESLint on save
@@ -140,6 +152,7 @@ module.exports = {
     '~assets/stylesheets/medium-editor.scss',
     '~assets/stylesheets/vuex-toast.scss',
     '@alisproject/alis-editor/dist/AlisEditor.css',
+    '~/assets/stylesheets/gruvbox-dark-modified.css',
     '~assets/stylesheets/ckeditor-view.scss'
   ],
   env: {

package.json

@@ -23,7 +23,8 @@
     "cilint": "circleci config validate -c .circleci/config.yml"
   },
   "dependencies": {
-    "@alisproject/alis-editor": "^0.2.22",
+    "@alisproject/alis-editor": "^0.3.1",
+    "@ckeditor/ckeditor5-dev-utils": "^12.0.7",
     "@johmun/vue-tags-input": "^2.1.0",
     "@nuxtjs/axios": "^5.9.3",
     "@nuxtjs/markdownit": "^1.2.7",
@@ -33,9 +34,11 @@
     "aws-sdk": "^2.411.0",
     "aws-serverless-express": "^3.3.5",
     "bignumber.js": "^8.1.1",
-    "blueimp-load-image": "^2.20.1",
+    "blueimp-load-image": "^2.26.0",
+    "cheerio": "^1.0.0-rc.3",
     "dayjs": "^1.8.9",
     "express": "^4.16.4",
+    "highlight.js": "^9.18.1",
     "lodash": "^4.17.13",
     "medium-editor": "^5.23.3",
     "node-fetch": "^2.6.0",