Розмітка та вирівнювання зображення

190

Я роблю сайт, який щомісяця публікує статті у випусках. Це просто, і я думаю, що використання редактора Markdown (на зразок WMD, що знаходиться тут, у переповненні стека) було б ідеальним.

Однак їм потрібна можливість вирівнювання зображень праворуч у заданому абзаці .

Я не бачу способу зробити це з поточною системою - чи це можливо?

html css markdown

— Джедіджа
джерело

2

Чому б просто не поставити питання без "Я допомагаю другові на некомерційному сайті, який щомісяця публікує статті у випусках"?

— JGallardo

11

@JGallardo Оскільки я хотів дати зрозуміти, я не мав повного контролю над системою, а також не мав можливості придбати будь-який тип рішення. Я згоден, що я міг би по-різному сформулювати це питання.

— Джедіджа

1

Щодо редакторів розмітки , ви можете скористатися чудовим stackedit.io/editor# , написати на ній дивовижно :)

— AbdelHady

1

@AbdelHady, якби він був доступний у 2008 році :)

— Jedidja

1

@iPython Як питання з 2008 року може бути дублікатом запитання, поставленого через 4 роки (2012)?

— Джедіджа

195

Ви можете вбудувати HTML у Markdown, щоб ви могли зробити щось подібне:

<img style="float: right;" src="whatever.jpg">

Continue markdown text...

— Грег Х'югілл
джерело

42

Очистіть його та стандартизуйте, закресливши непотрібне divта додавши до imgтегу закриту косу рису , тобто `<img style =" float: right "src ="

— what.jpg

Замість цього divя вважаю за краще використовувати spanвбудовані відступи. Для повного центрування абзаців divдобре, або навіть просто p.

— Очі

21

Це краще працює з деякими дезінфікованими перекладачами, такими як GitHub: <img align = "right" src = "

— what.jpg

19

@MattDiPasquale Закривальні косої риси не потрібні. Це XHTML, а не HTML.

— CaptSaltyJack

я спробував це вставити зображення в публікацію про блог-привид; Використовуючи <div style = "float: right"> <img ...> </div> правильно пропустити наступний абзац навколо зображення, тоді як <img style = "float: right" ...> поставити абзац і зображення в бічні коробки.

— Мартін ДеМелло

58

Я знайшов гарне рішення в чистому Markdown з невеликим CSS 3 хаком :-)

![image alt >](/image-right.jpg)
![image alt <](/image-left.jpg)
![image alt ><](/center-image.jpg)

Виконайте плаваюче зображення коду CSS 3 зліва або справа, коли image altзакінчується символом <або >.

img[alt$=">"] {
  float: right;
}

img[alt$="<"] {
  float: left;
}

img[alt$="><"] {
  display: block;
  max-width: 100%;
  height: auto;
  margin: auto;
  float: none!important;
}

— OzzyCzech
джерело

1

Де слід розмістити CSS у каталозі MkDocs? @YannDuran

— Іван Хуанг

2

@IvanHuang просто переконайтеся, що ви додали файл extra.css відповідно до документації на MkDocs і помістили css у цей файл.

— Ян Дюран

54

Багато додаткових процесорів Markdown підтримують атрибути. Таким чином, ви можете включити назву класу так (PHP Markdown Extra):

![Flowers](/flowers.jpeg){.callout}

або, альтернативно (Maruku, Kramdown , Python Markdown ):

![Flowers](/flowers.jpeg){: .callout}

Тоді, звичайно, можна правильно використовувати таблицю стилів:

.callout {
    float: right;
}

Якщо ваш підтримує цей синтаксис, він дає найкраще з обох світів: відсутність вбудованої розмітки та достатньо абстрактний таблиця стилів, щоб не потрібно було змінювати редактор вмісту.

— гервіц
джерело

До моменту, коли ви все це пишете:! Квіти {: .callout} ви також можете написати <img src = "/ flowers.jpeg" class = "

— callout

1

Я погоджуюся, але Markdown часто вибирають для користувачів, які не є * ML-грамотними, тому немає причин віддавати перевагу HTML перед будь-яким іншим довільним синтаксисом.

— Гервіц

4

("Без причин", звичайно, надмірно спрощується. Є багато причин UX, з яких ви можете хотіти, щоб ваші редактори наблизилися чи далі від остаточного відображення HTML. Або ви можете проти того, щоб запровадити залежність HTML у своєму вмісті, якщо ви Вибрали Маркдаун, щоб абстрагувати техніку візуалізації.)

— гервіц

33

У мене є альтернатива вищевказаним методам, які використовували тег ALT та селектор CSS на тезі alt ... Натомість додайте хеш URL-адреси, як це:

Спочатку ваш код зображення Markdown:

![my image](/img/myImage.jpg#left)
![my image](/img/myImage.jpg#right)
![my image](/img/myImage.jpg#center)

Зверніть увагу на доданий хеш URL-адреси #center.

Тепер додайте це правило в CSS, використовуючи селектори атрибутів CSS 3, щоб вибрати зображення з певним шляхом.

img[src*='#left'] {
    float: left;
}
img[src*='#right'] {
    float: right;
}
img[src*='#center'] {
    display: block;
    margin: auto;
}

Ви повинні мати можливість використовувати такий хеш URL-адреси, що майже нагадує визначення імені класу, і це не зловживання тегом ALT, як дехто прокоментував це рішення. Він також не потребуватиме додаткових розширень. Зробіть один для плаваючого правого і лівого, а також будь-якого іншого стилю, який ви хочете.

— тремор
джерело

1

Саме те, що я шукав. Ви - рятівник життя. Хочеться додати одне - `` h1 h2 {clear:

— obo

схоже на те, що я шукаю, але ... як зробити CSS? і як я це називаю в Маркдаун?

— Тоні Д

це також чудове рішення таке ж, як і моє :)

— OzzyCzech

3

@OzzyCzech - ні, насправді, ваше рішення зловживає тегом "alt" зображення, що може бути поганим для дотримання доступності на сторінці, де це рішення використовує підхід без вторгнення через тег src.

— тремор

24

Вбудовувати CSS погано:

![Flowers](/flowers.jpeg)

CSS в іншому файлі:

img[alt=Flowers] { float: right; }

67

Що? Тепер раптом вам доведеться редагувати зовнішній файл щоразу, коли ви змінюєте вміст розмітки? Це не здається гарним рішенням для мене.

— Jordan Reiter

9

@JordanReiter Кожен тут написав програму, що складається з декількох файлів, де логіка розповсюджена / організована у багатьох місцях. Ми робимо це спеціально для ремонту. Чому це так болісно і страшенно відрізняється?

— z5h

8

Розмітка дозволяє користувачам, які не програмують, створювати вміст, і він не повинен залежати від файлів, до яких потрібно безпосередньо звертатися та редагувати на сервері. Ще один приклад: я думаю, що цілком нормально вводити жорсткий код імен полів у базі даних у свій код, але помилка жорсткого коду, що базується на значенні поля у вашій базі даних (тобто if product.name == 'Tulips'), оскільки ви не можете залежати від стійкість вартості. Все це займає хто - то змінюється Flowersдо Flowerі несподівано , що зображення з'являється поза увагою. Крім того, вони повинні телефонувати вам кожного разу, коли вони додають зображення!

— Jordan Reiter

24

@cboettig Це серйозне зловживання тегом alt. Це має бути текстовим описом зображення для людей, які не бачать зображення.

— Натан Грігг

5

Мене дивує так багато людей, що плачуть над цим рішенням. Це прекрасний злом, необхідний для вирішення проблеми для певних хостингових послуг. Плакат, який дав цей прекрасний злом, зараз уже не залишився, а натомість громада залишилася з крикунами.

— Аарон Робінсон

22

Мені подобається бути ледачим, використовуючи таблиці для вирівнювання зображень із |синтаксисом вертикальної труби ( ). Це підтримується деякими ароматами Markdown (а також підтримується Textile, якщо це плаває ваш човен):

| I am text to the left  | ![Flowers](/flowers.jpeg) |

або

| ![Flowers](/flowers.jpeg) | I am text to the right |

Це не найбільш гнучке рішення, але воно добре для більшості моїх простих потреб, його легко читати у форматі розмітки, і вам не потрібно пам’ятати жоден CSS або необроблений HTML.

— Learnvst
джерело

2

Мені подобається цей стиль, дуже помітний. Шкода, що він не працює на Github (поки що все одно.)

— Eliot,

3

Я тільки що спробував цей синтаксис у GitHub, і він, здається, працює зараз.

— Еге Рубак

6

Це цікавий злом, але це неправильне використання таблиць для компонування. Ласкаво просимо в 1999 р.

— jxpx777

3

Для ароматизованої відмітки github додайте рядок з |-|-|. Він повідомляє аналізатору, що існує таблиця, а перший рядок - заголовок. Напр .: goo.gl/xUCRiK

— Кайла,

10

Навіть більш чистим було б просто помістити p#given img { float: right }в аркуш стилів, або в <head>та загорнутий у styleтеги. Потім просто використовуйте розмітку ![Alt text](/path/to/img.jpg).

— ma11hew28
джерело

8

<div style="float:left;margin:0 10px 10px 0" markdown="1">
    ![book](/images/book01.jpg)
</div>

Можливість атрибуту markdownвсередині Markdown.

— Пітер Мортенсен
джерело

1

Працював зі мною. Я не використовую github. Дякуємо @raphox.

— Уго Таварес

Відмінно працює з PHP-аналізатором ванільної мітки Michelf

— Ronan

2

Це функція Markdown Extra, яка включена в деякі системи управління вмістом (наприклад, Drupal), але не включає функцію Markdown per se.

— Тім

7

Мені сподобалась відповідь Learnvst про використання таблиць, оскільки вона досить читабельна (що є однією метою написання Markdown).

Однак у випадку з аналізатором Markdown від GitBook мені довелося, окрім порожнього рядка заголовка, додати під ним роздільний рядок, щоб таблиця була розпізнана та належним чином надана:

| - | - |
|---|---|
| I am text to the left  | ![Flowers](/flowers.jpeg) |
| ![Flowers](/flowers.jpeg) | I am text to the right |

Лінії-роздільники повинні містити щонайменше три тире ---.

— ікаріто
джерело

7

Якщо ви реалізуєте його в Python, є розширення, яке дозволяє додавати HTML пар / ключ / значення та мітки класу / id. Синтаксис для цього такий:

![A picture of a cat](cat.png){: style="float:right"}

Або якщо вбудований стиль не пливе на вашому човні,

![A picture of a cat](cat.png){: .floatright}

з відповідною таблицею стилів stylish.css:

.floatright {
    float: right;
    /* etc. */
}

— Джеме
джерело

2

Як сказав Грег, ви можете вставляти HTML-вміст у Markdown, але одним із пунктів Markdown є уникати необхідності мати широкі (або будь-які, з цього приводу) знання CSS / HTML щодо розмітки, правда? Це те, що я роблю:

У своєму файлі Markdown я просто доручаю всім моїм редакторам вікі вставляти всі зображення таким чином:

'<div> // Put image here  </div>`

(звичайно .. вони не знають, що <div>означає, але це не має значення)

Отже, файл Markdown виглядає приблизно так:

<div>
![optional image description][1]
</div>

[1]: /image/path

І у вмісті CSS, який охоплює всю сторінку, я можу робити те, що хочу, із тегом зображення:

img {
   float: right;
}

Звичайно, ви можете зробити більше із вмістом CSS ... (у цьому конкретному випадку, загортання imgтегу з дівою запобігає загортанню іншого тексту проти зображення ... це, мабуть, лише приклад), але IMHO суть точки Markdown це те, що ви не хочете, щоб потенційно нетехнічні люди вступали в додатки CSS / HTML. Це, як веб-розробник, вирішувати зробити ваш вміст CSS, який загортає сторінку максимально універсальним та чистим, але потім знову ваші редактори не повинні про це знати.

— абат
джерело

1

У мене було те саме завдання, і я вирівняв свої зображення праворуч, додавши це:

<div style="text-align: right"><img src="/default/image/sms.png" width="100" /></div>

Щоб вирівняти зображення вліво або по центру, замініть

<div style="text-align: right">

з

<div style="text-align: center">
<div style="text-align: left">

— Зуха Карим
джерело

Я спробував це, але зараз він працює .. зображення вирівнюється, але відображається html-текст.

— фіза-хан

-1

ця робота для мене

<p align="center">
 <img src="/LogoOfficial.png" width="300" >
</p>

— Andersonfrfilho
джерело

-16

Найпростіше - загортати зображення в центральний тег, як так ...

<center>![Alt test](http://upload.wikimedia.org/wikipedia/en/b/bc/Wiki.png)</center>

Все, що можна зробити з Markdown, можна перевірити тут - http://daringfireball.net/projects/markdown/dingus

Звичайно, <center>може бути застарілим, але це просто і це працює!

— йойо
джерело

1

Щойно помітив, що ОП запитувало правильне вирівнювання - я намагався сфокусувати зображення, коли натрапив на цю відповідь.

— yoyo

14

Ні, ніколи не використовуйте center.

— Йордан Рейтер

12

Я дійсно збираюся сторонитися з @ yoyo - <center>має сенс. Це застаріло з HTML, оскільки HTML повинен описувати лише вміст; стилі повинні бути в таблицях стилів. Однак у Markdown є інший намір: включити достатньо стилів, необхідних для передачі текстового повідомлення, а решту залишити до рендерінгу / сайту. <center>здається набагато природніше, ніж думати про CSS widths, floats, margins… - Я б навіть зайшов, щоб тест-аналізатор Markdown замінив <center>теги відповідними елементами, підтримуваними CSS, як на кшталт того, як він на сьогодні розумно розбирає абзаци.

— Сліп Д. Томпсон