Как я могу получить левые абзацы в show.js?

Стандартные абзацы HTML отображаются по центру с помощью show.js. Я бы хотел изменить это налево, как на обычной веб-странице. Я видел презентации opens.js, которые делают это, но как это работает?

Ответ 1

Решение

Вы можете изменить способ отображения слайдов, добавив в презентацию некоторый пользовательский CSS. Например, добавьте

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

влево выровнять все абзацы.

Дополнительные примеры

Вы только спросили о выровненных по левому краю абзацах, но вот несколько более сложных примеров, если кто-то найдет их полезными:

Восстановить титульную часть слайдов без заголовка:

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

Восстановить титульную часть слайда заголовка:

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

Файлы CSS по умолчанию, раскрытые по умолчанию. reveal.css, но мне посчастливилось просто взглянуть на сгенерированный HTML-код, чтобы выяснить, что должен делать мой CSS.

Pandoc

Все это работает, если вы создаете слайды open.js из markdown, используя Pandoc, который я очень рекомендую. В этом случае поместите блок <style> в файл и скажите Pandoc вставить его с помощью pandoc --include-in-header=<file with <style> block> ....

Ответ 2

Если вы начнете изменять параметры CSS, вы также можете сделать это прямо в файле CSS темы, где большинство из этих вещей определено в любом случае.

Например, вы найдете это в файле sky.css в папке тем.

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

Просто добавьте фрагмент CSS "text-align: left;" к этому, и ваши абзацы будут выровнены по желанию:

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

Вероятно, имеет смысл переименовать этот CSS в нечто вроде "mysky.css" и ссылку на новую тему в заголовке слайдов. Таким образом, если вы столкнулись с проблемами, вы всегда можете вернуться к исходной теме. По моему опыту, это работает очень хорошо.

Ответ 3

Используйте этот код в разделе:

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

Ответ 4

Я использую внешнюю уценку и в соответствии с принятым ответом я добавил

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

внизу <head> (после всех остальных CSS <link> s).

Это отлично работает, но теперь весь текст <p> выравнивается по левому краю. Поэтому я повторно присвоил тег <h6> (который мало используется) для любого "не жирного" текста, который я все еще хочу выравнивать по центру.

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

Я просто использую его в методе уценки с 6-хэшным префиксом:

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

Наконец, мои изображения были в тегах <p>, поэтому они также были выровнены по левому краю, но я хотел, чтобы они оставались центрированными и имели только текстовый текст влево. Я взломал это, префикс уценки изображения с любым тегом <h> в той же строке, например. используя единственный хэш-префикс <h1>:

#![alt text][path/to/my/image.png]