xaringan包初次使用及感受

ostrich

第一次用xaringan包，目前来讲找到了自己想到的一个工具，主要实现两大功能：1.可重复性实验，实验与文字内容结合在一起，不用复制粘贴；2.产生的html格式的文件是幻灯片样式的，并可用PPT切换器来切换。
相比于不用这个包，初次使用来讲，有两个差别：一是xaringan包将生成的图片单独存在一个文件夹中，而不用此包直接做的话，是将图片直接放在html内容中的；二是在用xaringan包之前，在播放生成的html文件时，只能用键盘和鼠标来播放，不方便。而用之后可以用切换器来切换了。
现在程序和图形都没多大问题，但文字部分的展示希望能象PPT那样就好了。应该设置下CSS就可以，可惜CSS基本不懂，也没有更多时间去学习它。如果大家有CSS方面的资料，请分享出来，谢谢！

yihui

ostrich 总结挺到位。最后也道出了关键问题：这是一个忍者风格的包，我在 README 中写了：

As the package title indicates, this package is designed for ninja. If you are a beginner of HTML/CSS, you may have to stick with the default CSS (which is not bad). The more you know about CSS, the more you can achieve with this package. The sky is your limit.

所以你要是不会 CSS，那只能干瞪眼了。我倒是想号召懂 CSS 的人来贡献一些现成的 CSS 主题，不过我连吼这一嗓子的时间都没有（主要是吼完了还得合并别人的贡献，后续事情比较多）。

话说回来，CSS 比 R 简单多了。连 R 都会用了，何不花点时间学学 CSS；其实我更推荐干脆把网页那一套基本的东西都学了算了，HTML、CSS、JavaScript 三件套。

ostrich

谢谢你的及时回复！
刚在网上查CSS的资料，打算下午抽点时间把CSS了解下，用在自己的自动化报告里，初步打算以后就用它来写PPT之类的了。?

yufree

学css的一个歪门邪道是看到不错的网页直接右键审查，看你感兴趣的div里对应的样式，然后通过在不同继承层次css的修改数值观察变换理解嵌套关系，然后把那一段div放到你的网页里，那段css抄到你的css里，80%的场景可以应付，然后你会发现最终80%的时间花在了剩下20%不能应付的地方 🤐

yihui

yufree 嗯，这正是我回帖中的最后一个链接说的事情。

ostrich

yufree 谢谢！这个方法很好，我尝试下。但打算在PPT中这么做的时候，好象不行，它不能保存为HTML格式的。如果尝试了有好的，简单的方法，到时分享出来。?

cionysus

yihui 谢老大我现在只有一个需求，就是把xaringan生成的幻灯片从只占浏览器的中心部分区域，变成占满浏览器整个显示区域，像revealjs生成的效果那样，请问该如何修改css文件？

yihui

cionysus 也就是说你不想真的在投影上播放幻灯片？因为多数投影仪只支持4:3或16:9的比例，要是太宽了你就没法显示全了。如果要设置比例，可以用 ratio 选项：https://github.com/gnab/remark/wiki/Configuration 对应 xaringan::moon_reader 下面的 nature 选项下面的 ratio 子选项。

cionysus

yihui 我之前用revealjs做幻灯片，我们学校的投影仪都能全屏显示出来，我不太了解细节😂

我是这么理解的，把ppt作者html格式放到网上，主要是为了便利传播吧，大部分人看你放在网上的幻灯片，不是用投影仪投出来看，而是直接在手机或者电脑屏幕上看。所以我觉得html的幻灯片的优势就是在线全屏的效果。
做个类比，我对这个效果的推崇，有点类似谢老大你对html的幻灯片能实现图片整张背景的效果。😁

另外，我觉得revealjs还有一个优点就是它能自动实现显示效果的自适应调整，就是在电脑上和手机上自动调整幻灯片的显示区域，但是都保证填满整个浏览器页面。

以我现在浅薄的理解，我觉得xaringan相对于revealjs的优势在于它能方便的控制图片的位置和缩放。

ostrich

yihui 又学了一招。✌

yihui

cionysus 默认比例是4:3，所以你的电脑肯定是宽屏。现在多数投影仪的比例也是4:3，你的电脑连上投影仪应该会自动调节分辨率变成4:3，所以你能在投影仪上全屏显示幻灯片。

你要是觉得默认太窄，你可以试更宽的比例，直到幻灯片填充满你的电脑屏幕。

remark.js 不支持自适应宽度。通过某些暗黑 CSS 或 JS 技术大约能解除这个限制，但我个人没有这个需求，所以你要是觉得这一块痒得厉害，你可以自己去抓抓，甚至可以给 remark.js 提交补丁。

固定比例和自适应比例各有各的好处，也不能说谁比谁绝对好。

cionysus

yihui 我刚想了想，是不是其实revealjs也没有实现全屏，它就是把xaringan左右空出来的区域，用背景色填满，但其实这两块区域没有实质内容的。所以在投影仪显示的时候，即使左右有部分区域没有显示出来，也看不出来的。

yihui

cionysus 如果只是整个页面使用统一背景色，那这问题就简单多了。你学学 CSS 应该不难搞定。

cionysus

yihui 我再回去摸索下

ostrich

这两天摸索了下，初步可以用CSS来达到自己想要的效果了。
分别用到了类选择器（.)和id选择器(#)，设置好页面边距，字体字号，首行缩进，这些就差不多了。但还是有不少问题，如在外部CSS中建立了一个id选择器名为dl，在调用它时，用“

的形式，还是觉得有点麻烦，要是能将它定义为类似”#“这样的简单标记就好了，不知可行否？还有在id选择器中能建立的规则在类选择器中建立不了，不起作用，如首行缩进。继续实验中，希望与大家交流学习。

ostrich

刚发完，就发现问题了，但不知如何改。上贴中间断的地方用了html标签语言。