diff --git a/gatsby-browser.js b/gatsby-browser.js index 83d72722d..966a061af 100644 --- a/gatsby-browser.js +++ b/gatsby-browser.js @@ -15,6 +15,9 @@ require('./src/css/reset.css'); require('./src/prism-styles'); require('./src/css/algolia.css'); +// Import Japanese style fix CSS +require('./src/css/ja-fix.css'); + // Expose React and ReactDOM as globals for console playground window.React = React; window.ReactDOM = ReactDOM; diff --git a/gatsby-config.js b/gatsby-config.js index 456396f92..349e2e486 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -55,6 +55,7 @@ module.exports = { maxWidth: 840, }, }, + 'gatsby-remark-japanese-fix', 'gatsby-remark-header-custom-ids', { resolve: 'gatsby-remark-code-repls', diff --git a/plugins/gatsby-remark-japanese-fix/index.js b/plugins/gatsby-remark-japanese-fix/index.js new file mode 100644 index 000000000..7a5c33e3c --- /dev/null +++ b/plugins/gatsby-remark-japanese-fix/index.js @@ -0,0 +1,26 @@ +const toString = require('mdast-util-to-string'); +const visit = require('unist-util-visit'); + +const hasJapaneseCharacter = str => { + // Detects katakana, hiragana, iteration marks, and CJK unified ideographs + return /[\u30a0-\u30ff\u3040-\u309f\u3005-\u3006\u4e00-\u9fea。、]/.test(str); +}; + +/** + * Iterates over emphases ('s) within the AST created by remark. + * Applies 'em-ja' class only when it contains a Japanese character, + * so that it can be displayed with a different style. + */ + +module.exports = ({markdownAST}, options) => { + visit(markdownAST, 'emphasis', node => { + const nodeStr = toString(node); + if (hasJapaneseCharacter(nodeStr)) { + // Patch AST + node.data = node.data || {}; + node.data.hProperties = node.data.hProperties || {}; + node.data.hProperties.class = 'em-ja'; + } + }); + return markdownAST; +}; diff --git a/plugins/gatsby-remark-japanese-fix/package.json b/plugins/gatsby-remark-japanese-fix/package.json new file mode 100644 index 000000000..d3eb061f4 --- /dev/null +++ b/plugins/gatsby-remark-japanese-fix/package.json @@ -0,0 +1,4 @@ +{ + "name": "gatsby-remark-japanese-fix", + "version": "0.0.1" +} diff --git a/src/css/ja-fix.css b/src/css/ja-fix.css new file mode 100644 index 000000000..275ca0c07 --- /dev/null +++ b/src/css/ja-fix.css @@ -0,0 +1,4 @@ +.em-ja { + font-weight: bolder; + font-style: normal; +} \ No newline at end of file