Asciidoctor 安裝

cygpkg i ruby

安裝 Asciidoctor：
gem install asciidoctor

檢查版本：
asciidoctor -v

Asciidoctor 2.0.18 [https://asciidoctor.org]

安裝 Rouge：
gem install rouge

出錯，提示要安裝 `gem install rouge -v 3.30.0`
gem install rouge -v 3.30.0

gem install pygments.rb
gem install coderay

asciidoctor 檔案 [選項]

asciidoctor MyAdoc.adoc \
--verbose --trace \
-D MyDestinationDirectory \
-a experimental \
-a icons=font

檢查 ruby 的版本：
ruby -v

ruby 2.6.4p104 (2019-08-28 revision 67798) [x86_64-cygwin]

安裝：
gem install asciidoctor-pdf

檢查版本：
asciidoctor-pdf -v

Asciidoctor PDF 2.3.4 using Asciidoctor 2.0.18 [https://asciidoctor.org]

asciidoctor-pdf 檔案 [選項]

theme=zh-TW
toctitle="內容目錄"
InputFile=<InputFile>
OutputFile=<OutputFile>

asciidoctor-pdf \
$InputFile -o $OutputFile
--trace --verbose
-a pdf-theme=$theme
-a toc-title=$toctitle \
-r ./bin/pdf-svg-font.rb \
-a scripts=cjk \
-a icons=font \
-a source-highlighter=rouge \
-a experimental \
-a toc=auto \
-a sectnums=1 \
-a sectnumlevels=1 \
-a toclevels=3 \
-a outlinelevels=3:0

npm i -g @asciidoctor/core asciidoctor-pdf

asciidoctor-web-pdf --version
# Asciidoctor Web PDF 1.0.0-alpha.10 using Asciidoctor.js 2.2.0 (Asciidoctor 2.0.10) [https://asciidoctor.org]
# Runtime Environment (node v12.18.3 on win32)
# CLI version 3.4.0

asciidoctor-web-pdf <Your adoc file> \
-a stylesheet=<Your css file>

檢查 Node.js 的版本：
npm -v

8.19.2

檢查 @asciidoctor/core 可安裝的版本：
npm view @asciidoctor/core version

2.2.6

檢查 highlight.js 可安裝的版本：
npm view highlight.js version

11.7

npm install -global @asciidoctor/core@2.2.6
npm install -global highlight.js@11.7
npm install -global asciidoctor-highlight.js@0.4.0

cd ~
cat > test-hljs.js << "EOF"
// Load asciidoctor.js and asciidoctor-highlight.js.
const asciidoctor = require('@asciidoctor/core')()
const highlightJsExt = require('asciidoctor-highlight.js')

// Register the extension into global registry.
highlightJsExt.register(asciidoctor.Extensions)

// Convert the content to HTML.
const content = `
[source, js]
console.log('Hello, world!')
`
const html = asciidoctor.convert(content, {
  attributes: { 'source-highlighter': 'highlightjs-ext'}, (1)
})
console.log(html)
EOF

# 執行測試
node test-hljs.js

# 測試結束，刪除測試指令碼。
rm test-hljs.js

const asciidoctor = require('@asciidoctor/core')() (1)
// const asciidoctor = require('asciidoctor')() (1)

asciidoctor.convertFile('MyAdoc.adoc', (2)
  { safe: 'unsafe', (3)
    to_dir: 'MyDestinationDirectory',
    verbose: true, trace: true, (4)
    attributes: (5)
     {
       linkcss: true,
       copycss: false,
       experimental: true,
       icons: 'font',
       'source-highlighter': 'highlightjs-ext',
       toclevels: 2
      }
  }
)

icon:external-link-alt[set=fas]

cat > asciidoctor-wrap.js << "EOF"
const asciidoctor = require('@asciidoctor/core')()
// const asciidoctor = require('asciidoctor')()

const highlightJsExt = require('asciidoctor-highlight.js')
highlightJsExt.register(asciidoctor.Extensions)

class TemplateConverter {
    constructor() {
        this.baseConverter = asciidoctor.Html5Converter.$new()

        const inlineImage = (node) => {
            if (node.getType() === 'icon') {
                // Icon fonts add font set attributes
                var attrib = node.getAttribute('set')
                if (!attrib) {
                    attrib = node.getDocument().getAttribute('icon-set')
                }
                var imageElement = this.baseConverter.$convert_inline_image(node)
                if (attrib) {
                    imageElement = imageElement.replace('"fa ', '"' + attrib + ' ')
                }
                return imageElement
            } else {
                // The node is not an icon, such as a callout.
                return this.baseConverter.$convert_inline_image(node)
            }
        }
        this.templates = {
            inline_image: inlineImage
        }
    }

    convert(node, transform, opts) {
        const template = this.templates[transform || node.node_name]
        if (template) {
            return template(node)
        }
        return this.baseConverter.convert(node, transform, opts)
    }
}

asciidoctor.ConverterFactory.register(new TemplateConverter(), ['html5'])

module.exports = {
    asciidoctor
}
EOF

cat > asciidoctor-wrap-test.js << "EOF"
const content = `
icon:check-square[] check-square +
icon:check-square[set="far"] check-square(far)

:icon-set: fas
icon:check-square[] check-square(fas)

[source, js]
console.log('Hello, world!')
`
const options = {
  attributes: {
    icons: 'font',
    'source-highlighter': 'highlightjs-ext'
  }
}

const wrap = require('./asciidoctor-wrap.js')
console.log(wrap.asciidoctor.convert(content, options))
EOF

# 執行測試
node asciidoctor-wrap-test.js

# 測試結束，刪除測試指令碼。
rm asciidoctor-wrap-test.js

icon:gitlab[prefix=fab]

npm i -g \
@fortawesome/fontawesome-svg-core \
@fortawesome/free-solid-svg-icons \
@fortawesome/free-regular-svg-icons \
@fortawesome/free-brands-svg-icons

$ npm list -g
C:\apps\cygwin\usr\local\npm
├── @asciidoctor/core@2.2.6
├── @fortawesome/fontawesome-common-types@6.2.1
├── @fortawesome/fontawesome-svg-core@6.2.1
├── @fortawesome/free-brands-svg-icons@6.2.1
├── @fortawesome/free-regular-svg-icons@6.2.1
├── @fortawesome/free-solid-svg-icons@6.2.1

顯示 fontawesome-svg-core 可安裝的版本：
npm view @fortawesome/fontawesome-svg-core versions

找出小於 1.3 的版本為 1.2.36

顯示 icons 可安裝的版本：
npm view @fortawesome/free-solid-svg-icons versions

svg core 版本 1.2 需配合 icons 版本 5, 找出版本 5 的最大值為 5.15.4

cd ~
npm init -y

npm install @fortawesome/fontawesome-svg-core@1.2.36

npm i \
@fortawesome/free-solid-svg-icons@5.15.4 \
@fortawesome/free-regular-svg-icons@5.15.4 \
@fortawesome/free-brands-svg-icons@5.15.4

# 切換至 free-solid-svg-icons 模組的路徑
cd ~/node_modules/@fortawesome/free-solid-svg-icons

SRC='M432,320H400a16,16,0,0,0-16,16V448H64V128H208a16,16,0,0,0,16-16V80a16,16,0,0,0-16-16H48A48,48,0,0,0,0,112V464a48,48,0,0,0,48,48H400a48,48,0,0,0,48-48V336A16,16,0,0,0,432,320ZM488,0h-128c-21.37,0-32.05,25.91-17,41l35.73,35.73L135,320.37a24,24,0,0,0,0,34L157.67,377a24,24,0,0,0,34,0L435.28,133.32,471,169c15,15,41,4.5,41-17V24A24,24,0,0,0,488,0Z'

# 先檢查一下是否有錯誤檔案
grep -rl "$SRC"

# 應該有下列三個檔案
# faExternalLinkAlt.js
# index.es.js
# index.js

# 執行修正
FIX='M432 320H400a16 16 0 0 0-16 16V448H64V128H208a16 16 0 0 0 16-16V80a16 16 0 0 0-16-16H48A48 48 0 0 0 0 112V464a48 48 0 0 0 48 48H400a48 48 0 0 0 48-48V336A16 16 0 0 0 432 320ZM488 0h-128c-21.37 0-32.05 25.91-17 41l35.73 35.73L135 320.37a24 24 0 0 0 0 34L157.67 377a24 24 0 0 0 34 0L435.28 133.32 471 169c15 15 41 4.5 41-17V24A24 24 0 0 0 488 0Z'
grep -rl "$SRC" | xargs sed -i "s/$SRC/$FIX/"

cat > asciidoctor-svg-embed.js << "EOF"
const asciidoctor = require('@asciidoctor/core')()
const highlightJsExt = require('asciidoctor-highlight.js')
highlightJsExt.register(asciidoctor.Extensions)

const fortawesome = require('@fortawesome/fontawesome-svg-core');
const library = fortawesome.library;
const fas = require('@fortawesome/free-solid-svg-icons').fas
const far = require('@fortawesome/free-regular-svg-icons').far
const fab = require('@fortawesome/free-brands-svg-icons').fab
library.add(fas, far, fab)

const icon = fortawesome.icon
class TemplateConverter {
  constructor() {
    this.baseConverter = asciidoctor.Html5Converter.$new()

    const inlineImage = (node) => {
      if (node.getType() === 'icon') {
        const transform = {}
        if (node.hasAttribute('rotate')) {
          transform.rotate = node.getAttribute('rotate')
        }
        if (node.hasAttribute('flip')) {
          const flip = node.getAttribute('flip')
          if (flip === 'vertical' || flip === 'y' || flip === 'v') {
            transform.flipY = true
          } else {
            transform.flipX = true
          }
        }
        const options = {}
        options.transform = transform
        if (node.hasAttribute('title')) {
          options.title = node.getAttribute('title')
        }
        options.classes = []
        if (node.hasAttribute('size')) {
          options.classes.push(`fa-${node.getAttribute('size')}`)
        }
        if (node.getRoles()) {
          options.classes.push(node.getRoles().map(value => value.trim()))
        }

        const meta = {}
        var attrib = node.getAttribute('set') (1)
        if (!attrib) {
          attrib = node.getDocument().getAttribute('icon-set')
        }
        if (attrib) {
          meta.prefix = attrib
        }

        meta.iconName = node.getTarget()
        const faIcon = icon(meta, options)
        if (faIcon) {
          return faIcon.html
        }
        else {
          return meta.iconName
        }
      } else {
        // The node is not an icon, such as a callout.
        return this.baseConverter.$convert_inline_image(node)
      }
    }
    this.templates = {
      inline_image: inlineImage
    }
  }

  convert(node, transform, opts) {
    const template = this.templates[transform || node.node_name]
    if (template) {
      return template(node)
    }
    return this.baseConverter.convert(node, transform, opts)
  }
}
asciidoctor.ConverterFactory.register(new TemplateConverter(), ['html5'])

const dom = fortawesome.dom;
const styles = asciidoctor.Extensions.create()
styles.docinfoProcessor(function () {
  const self = this
  // Style output to header_footer
  // header_footer needs to be set to true
  self.atLocation('head')
  self.process(function () {
    return `<style>${dom.css()}</style>`
  })
})

module.exports = {
  asciidoctor,
  styles
}
EOF

cat > asciidoctor-svg-embed-test.js << "EOF"
const content = `
icon:check-square[] check-square +
icon:check-square[set="far"] check-square(far)

:icon-set: fas
icon:check-square[] check-square(fas)

NOTE: Note

[source, js]
----
console.log('Hello, world!') <1>
----
<1> logging
`
const wrap = require('./asciidoctor-svg-embed.js')
console.log(wrap.asciidoctor.convert(content,
  {
    // header_footer: true, (1)
    // extension_registry: wrap.styles, (1)
    attributes: {
      icons: 'svg',
      'source-highlighter': 'highlightjs-ext'
    }
  }
))
EOF

# 執行測試
node asciidoctor-svg-embed-test.js

# 測試結束，刪除測試指令碼
rm asciidoctor-svg-embed-test.js

cygpkg i git

cd $docs # 切換至專案資料夾
git clone https://github.com/asciidoctor/asciidoctor-stylesheet-factory styles (1)
cd styles
bundle
npm i (2)

cd $docs # 切換至專案目錄
cd styles

# 編譯 sass
./build-stylesheet.sh [主題檔名]

cp -r /usr/share/gems/gems/zurb-foundation-4.3.2/scss/foundation $docs/styles/sass
cp /usr/share/gems/gems/zurb-foundation-4.3.2/scss/normalize.scss $docs/styles/sass/_normalize.scss

styles
└── sass
    ├── foundation
    │   ├── components
    │   └─ _variables.scss
    ├─ _normalize.scss
    └─ ...