Come posso ottenere paragrafi giustificati a sinistra in rivelare.js?

StackOverflow https://stackoverflow.com//questions/21019476

  •  21-12-2019
  •  | 
  •  

Domanda

I paragrafi HTML standard vengono visualizzati centrati da rivelare.js.Vorrei cambiarlo in giustificato a sinistra, come su una normale pagina web.Ho visto presentazioni rivelare.js che fanno questo, ma come funziona?

È stato utile?

Soluzione

Soluzione

Puoi modificare l'aspetto delle diapositive aggiungendo alcuni CSS personalizzati alla tua presentazione.Ad esempio, aggiungi

<style type="text/css">
p { text-align: left; }
</style>

per allineare a sinistra tutti i paragrafi.

Altri esempi

Hai chiesto solo dei paragrafi allineati a sinistra, ma ecco alcuni esempi più complicati, nel caso qualcuno li trovi utili:

  • Rimodella la parte del titolo delle diapositive senza titolo:

    <style type="text/css">
.reveal .slide h1 { font-size: 200%; text-decoration: underline; }
</style>

  • Rimodellare la parte del titolo della diapositiva del titolo:

    <style type="text/css">
.reveal .slides .title {
  /* Ugly ... */
  text-shadow: 0px 0px 25px rgb(100,256,0); 
  font-size: 300%;
}
</style>

I file CSS predefiniti di rivelare.js sono complicati, ad es. rivelare.css, ma ho avuto fortuna semplicemente guardando l'HTML generato per capire quale dovrebbe essere il target del mio CSS.

Pandoc

Tutto questo funziona ancora se stai generando diapositive rivelare.js da ribasso utilizzando Pandoc, che consiglio vivamente.In tal caso, metti il <style> block in un file e di' a Pandoc di inserirlo con pandoc --include-in-header=<file with <style> block> ....

Altri suggerimenti

Se si avvia la modifica delle opzioni CSS, potrebbe anche farlo proprio nel file CSS del tema, dove la maggior parte di queste cose è definita comunque.

Ad esempio, lo troverai nel file "sky.csss" nella cartella dei temi.

.reveal p {
  margin: 20px 0;
  line-height: 1.3; }
.

Basta aggiungere lo snippet CSS "allinearsi al testo: a sinistra;"A questo, e i tuoi paragrafi saranno allineati come desiderato: 

.reveal p {
  margin: 20px 0;
  line-height: 1.3;
  text-align: left; }
.

Probabilmente ha senso rinominare quel CSS a qualcosa come "mysky.css" e collegarsi al nuovo tema nell'intestazione dei tuoi scivoli.In questo modo, se si effettuano problemi, è possibile passare sempre al tema originale. Nella mia esperienza, funziona molto bene.

Use this code in section:

<section style="text-align: left;">

I'm using external markdown and as per the accepted answer I added

<style type="text/css">
    p { text-align: left; }
</style>

at the bottom of the <head> (after all other CSS <link>s).

This works great but now all my <p> text is left-aligned. So I re-appropriated the <h6> tag (which doesn't get used much) for any 'non-bold' text that I still want to be center-aligned.

<style type="text/css">
    p { text-align: left; }
    .reveal h6 {
        text-transform: none;
        font-weight: 400;
    }
</style>

I just use it in markdown with a 6-hash prefix:

######Some non-capitalized, normal weight, centered text

Finally my images were all in <p> tags and so they were also left-aligned, but I wanted them to remain centered and only have block text left-aligned. I hacked this by prefixing the image markdown with any <h> tag on the same line, e.g. using an <h1> single hash prefix:

#![alt text][path/to/my/image.png]
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top