reveal.js:前端实现ppt+markdowm 的一些显示问题解决方法

官网文档： https://slides.com/
GitHub

基础设置

<script src="dist/reveal.js"></script>		
<script src="plugin/zoom/zoom.js"></script>		
<script src="plugin/notes/notes.js"></script>		
<script src="plugin/search/search.js"></script>
<script src="plugin/markdown/markdown.js"></script>		
<script src="plugin/highlight/highlight.js"></script>
<script>
Reveal.initialize({
controls: true,// 是否在右下角展示控制条				
progress: true,// 是否显示演示的进度条			
center: true,				
hash: true,
math: {
      mathjax: 'https://cdn.jsdelivr.net/gh/mathjax/mathjax@2.7.8/MathJax.js',
      config: 'TeX-AMS_HTML-full',
      // pass other options into `MathJax.Hub.Config()`
      TeX: { Macros: { RR: "{\\bf R}" } }
    },							
plugins: [ RevealZoom, RevealNotes, RevealSearch, RevealMarkdown, RevealHighlight,RevealMath ]
	
});		
</script>

全局概览：按ESC（F11或F键进入全屏模式，B暂停继续展示）

跳转连接

<a href="#/2/3">like this</a>.

Markdown

<section data-markdown>
  <textarea data-template>
    ## Slide 1
    A paragraph with some text and a [link](http://hakim.se).
    ---
    ## Slide 2
    ---
    ## Slide 3
  </textarea>
</section>

注： \begin{bmatrix}1\newline 2\end{bmatrix} 用\newline实现换行
长段latex无法对齐，可使用

   </span>
   <span class="r-fit-text">

进行分割，让后用

\qquad 

统一调整长度，即可实现对齐。

代码区域

<section>
  <pre><code data-trim data-noescape>
	import cv2
	import numpy as np
	from src.dlt import calculate_transformation_matrix
	from src.util import *
  </code></pre>
</section>

加 script type=“text/template” 展示html

<pre><code>

<script type="text/template">
sealed class Either<out A, out B> {
  data class Left<out A>(val a: A) : Either<A, Nothing>()
  data class Right<out B>(val b: B) : Either<Nothing, B>()
}
</script>

</code></pre>

笔记区域

  <section>			
         <h2>笔记区域</h2>		
         <p> You can press s.</p>
         <aside class="notes">				
         一些笔记
	     </aside>	
  </section>

展示时隐藏某一张

设置data-visibility=“hidden”

  <section data-visibility="hidden">			
  </section>

自动调整字号

 <section>
					
         <p>添加r-fit-text类以自动调整文本大小</p>
					
         <h2 class="r-fit-text">ABCDEFGHIJKLMN TEXT</h2>

         <h2 class="r-fit-text">ABCDEFGHIJKLMNOPQRSTUVWXYZ TEXT</h2>				
  </section>

Html中的List仍起作用

  <section>
					
         <h2> List</h2>
					
          <ul>
						
          <li>No order here</li>
						
          <li>Or here</li>
						
          <li>Or here</li>
						
          <li>Or here</li>
					
         </ul>
				
  </section>

背景

  <section>
					
        <section data-background="#dddddd">	
        </section>
	
        <section data-background=".png">		
        </section>
					
        <section data-background=".png" data-background-repeat="repeat" data-background-size="100px">
       </section>
					
       <section data-background-video=".mp4" data-background-color="#000000">
       </section>
					
       <section data-background=".gif">		
       </section>
				
  </section>

文字变色动画，Highlight

 <p>     Highlight 
                       <span class="fragment highlight-red">red</span> 
                       <span class="fragment highlight-blue">blue</span> 
                       <span class="fragment highlight-green">green</span>
 </p>

淡入淡出动画

  <section>
										
         <section>
						
                <h2>Fragment Styles</h2>
						
                <p>There's different types of fragments, like:</p>
						
                <p class="fragment grow">grow</p>
						
                <p class="fragment shrink">shrink</p>
						
                <p class="fragment fade-out">fade-out</p>
						
                <p>
   <span style="display: inline-block;" class="fragment fade-right">fade-right, </span>
                      <span style="display: inline-block;" class="fragment fade-up">up, </span>
							
                      <span style="display: inline-block;" class="fragment fade-down">down, </span>
							
                      <span style="display: inline-block;" class="fragment fade-left">left</span>
						
                </p>
						
                <p class="fragment fade-in-then-out">fade-in-then-out</p>
						
                <p class="fragment fade-in-then-semi-out">fade-in-then-semi-out</p>
						
               					
          </section>
				
  </section>

事件绑定

<section data-state="customevent"></section>

Reveal.on( 'customevent', function() {
	console.log( '"customevent" has fired' );
} );

也能添加自己定义的事件，比如时间的显示：

setInterval(function(){ document.getElementById("currentTime").innerHTML=new Date().toLocaleString(); },1000);

document.onkeydown =cdk; 
function cdk(){ 
    if(event.keyCode ==13){
        alert('你按下了Enter');
    }
}

参考与更多

有关后续使用中的问题

review.js ppt数学公式无法显示

看板娘

<style>#live2dcanvas {border: 0 !important;}</style>
<script type="text/javascript" charset="utf-8"  src="https://files.cnblogs.com/files/liuzhou1/L2Dwidget.0.min.js"></script>
<script type="text/javascript" charset="utf-8"  src="https://files.cnblogs.com/files/liuzhou1/L2Dwidget.min.js"></script>
<script type="text/javascript">
    L2Dwidget.init({"display": {
        "superSample": 2,
        "width": 200,
        "height": 400,
             "position": "right",
                 "hOffset": 0,
        "vOffset": 0
          }
     });
</script>

https://github.com/stevenjoezhang/live2d-widget

impress.jshttps://www.runoob.com/w3cnote/impress-js-ppt.html

大段文字常用的对齐方式

  <section data-background-color="rgb(255, 255, 255)">
      <table> <tr><td style="width: 100%;height: 30px; font-weight:700;"> 部分一. 模型结构 </td> <td></td></tr> </table>
      <div align="left" class="r-fit-text">
        允许我们在不同场景之间传递知识，因为语义嵌入独立于空间信息。
        例如，道路位置的变化将使学习的视觉特征无效，而不会影响学习的语义特征。
       </div> 
  </section>

标题

<table> <tr><td style="width: 100%;height: 30px; font-weight:700;"> 标题 </td> <td></td></tr> </table>

脚注

<table> <tr><td style="width: 100%;height: 5px; font-weight:3;text-align: right;font-size:0.5cm;"> *** et al., "***" in IEEE Transactions on Pattern Analysis and Machine Intelligence, 2022, </td> <td></td></tr> </table>