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

コメントを残す

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

To respond on your own website, enter the URL of your response which should contain a link to this post's permalink URL. Your response will then appear (possibly after moderation) on this page. Want to update or remove your response? Update or delete your post and re-enter your post's URL again. (Find out more about Webmentions.)