Asciidoctor reveal.jsで打ち消し線

最近はスライド作成にAsciidoctor reveal.jsを利用しています.vimで書いてasciidoctor-revealjs-linuxコマンドで変換しています.

スライド内で打ち消し線を使おうと思ったのですが,変換されたスライドに反映されません.

[.line-through]#打ち消される文字列#

以下のページを参考にカスタムスタイルシートを設定することで解決しました.

my.cssに追記
.line-through{
  text-decoration:line-through
}

slide line through ng
slide line through ok

具体的には,スライドの.adocファイルの :customcss:resources/my-css.css の様にカスタムcssファイルを指定しているのでその中に追記しました.

slide.adoc
= スライドテスト
Kenichiro Matohara(matoken) <maroken@example.org>
:revnumber: 1.0
:revdate: 2022-04-23(Sat)
:revremark: 「{doctitle}」
:homepage: https://matoken.org/
:imagesdir: resources
:data-uri:
:example-caption: 例
:table-caption: 表
:figure-caption: 図
:backend: revealjs
:revealjs_theme: serif
:customcss: resources/my-css.css
:revealjs_slideNumber: c/t
:title-slide-transition: none
:icons: font
:revealjs_hash: true
:revealjs_center: true
:revealjs_autoPlayMedia: true
:revealjs_transition: false
:revealjs_transitionSpeed: fast

== 打ち消し線を使いたい

[.line-through]#打ち消される文字列#
resources/my.css
.reveal .slides {
  font-family: 'BIZ UDPGothic';
  font-size: calc(28px + 0.25vw);
}

.reveal .slides h1,
.reveal .slides h2 {
  font-weight: 90%;
}

.line-through{
  text-decoration:line-through
}

revealjs_themeによってはそのまま打ち消し線が使えるような気もします.(今回はserif)

環境
$ asciidoctor-revealjs-linux -v
Asciidoctor reveal.js 4.1.0 using Asciidoctor.js 2.2.1 (Asciidoctor 2.0.12) [https://asciidoctor.org]
Runtime Environment (node v12.13.1 on linux)
CLI version 3.2.0

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です