Markdown i wyrównanie obrazu

190

Tworzę witrynę, która co miesiąc publikuje artykuły w numerach. Jest to proste i myślę, że użycie edytora Markdown (takiego jak WMD tutaj w Stack Overflow) byłoby idealne.

Jednak oni potrzebują zdolność do obrazów wyrównany do prawej strony w danym akapicie .

Nie widzę sposobu na zrobienie tego w obecnym systemie - czy to możliwe?

html css markdown Jedidja
źródło
2
Dlaczego nie zadać pytania bez „Pomagam przyjacielowi w witrynie non-profit, która co miesiąc publikuje artykuły w numerach”?
JGallardo
11
@JGallardo Ponieważ chciałem wyjaśnić, że nie mam pełnej kontroli nad systemem, ani nie miałem możliwości zakupu żadnego rodzaju rozwiązania. Zgadzam się, że mogłem sformułować pytanie inaczej.
Jedidja
1
Jeśli chodzi o edytory przecen , możesz użyć świetnego stackedit.io/editor# , pisanie w nim jest niesamowite :)
AbdelHady
1
@AbdelHady, gdyby tylko był dostępny w 2008 roku :)
Jedidja
1
@iPython W jaki sposób pytanie z 2008 roku może być duplikatem pytania zadanego 4 lata później (2012)?
Jedidja

Odpowiedzi:

195

Możesz osadzić HTML w Markdown, dzięki czemu możesz zrobić coś takiego:

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

Continue markdown text...
Greg Hewgill
źródło
42
Oczyść go i wystandaryzuj, usuwając odpowiednio niepotrzebne divi dodając zamykający ukośnik odpowiednio do imgtagu, tj. „<Img style =" float: right "src = "
okolwiek.jpg
Zamiast divwolę używać spanwbudowanego wcięcia. Dla pełnego wyśrodkowania akapitu divjest dobre, a nawet proste p.
Oko
21
Działa
19
@MattDiPasquale Zamykające się ukośniki nie są konieczne. To XHTML, a nie HTML.
CaptSaltyJack
próbowałem osadzić obraz w blogu o duchach; używając <div style = "float: right"> <img ...> </div> poprawnie przepłynął następujący akapit wokół obrazu, podczas gdy <img style = "float: right" ...> umieść akapit i obraz w pudełkach obok siebie.
Martin DeMello,
58

Znalazłem dobre rozwiązanie w czystym Markdown z małym hakiem CSS 3 :-)

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

Postępuj zgodnie z obrazem pływającym kodu CSS 3 po lewej lub prawej stronie, gdy image altkończy się na <lub >.

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

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

img[alt$="><"] {
  display: block;
  max-width: 100%;
  height: auto;
  margin: auto;
  float: none!important;
}
OzzyCzech
źródło
1
Gdzie należy umieścić CSS w katalogu MkDocs? @YannDuran
Ivan Huang
2
@IvanHuang tylko upewnij się, że dodajesz plik extra.css zgodnie z dokumentacją MkDocs i umieścisz css w tym pliku.
Yann Duran
54

Wiele „dodatkowych” procesorów Markdown obsługuje atrybuty. Możesz więc dołączyć taką nazwę klasy (PHP Markdown Extra):

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

lub alternatywnie (Maruku, Kramdown , Python Markdown ):

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

Następnie możesz oczywiście użyć arkusza stylów we właściwy sposób: 

.callout {
    float: right;
}

Jeśli twój obsługuje tę składnię, daje to, co najlepsze z obu światów: brak wbudowanego znacznika i arkusz stylów wystarczająco abstrakcyjny, aby nie trzeba go modyfikować w edytorze treści.

Gerwitz
źródło
Zanim napiszesz to wszystko:! Kwiaty {: .callout} równie dobrze możesz napisać <img src = "/ flowers.jpeg" class = "
callout
1
Zgadzam się, ale Markdown jest często wybierany dla użytkowników, którzy nie znają * ML, więc nie ma powodu, aby preferować HTML zamiast jakiejkolwiek innej składni.
gerwitz
4
(„Brak powodu” jest oczywiście nadmiernym uproszczeniem. Istnieje wiele powodów, dla których edytorzy mogą zbliżyć się lub oddalić od ostatecznego renderowania HTML. Lub możesz być niechętny wprowadzeniu zależności HTML od treści, jeśli wybrałem Markdown, aby wyodrębnić technikę renderowania.)
gerwitz
33

Mam alternatywę dla powyższych metod, które wykorzystywały znacznik ALT i selektor CSS na znaczniku alt ... Zamiast tego dodaj skrót URL w następujący sposób:

Najpierw kod obrazu Markdown:

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

Zwróć uwagę na dodane # hash #center.

Teraz dodaj tę regułę do CSS za pomocą selektorów atrybutów CSS 3, aby wybrać obrazy z określoną ścieżką.

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

Powinieneś być w stanie użyć skrótu adresu URL prawie jak definiowanie nazwy klasy i nie jest to niewłaściwe użycie tagu ALT, jak niektórzy komentowali to rozwiązanie. Nie będzie też wymagać żadnych dodatkowych rozszerzeń. Zrób jeden dla pływaka w prawo i lewo, a także dowolne inne style, które możesz chcieć.

drżenie
źródło
1
Dokładnie tego szukałem. Jesteś wybawcą życia. Chciałbym dodać jedną rzecz: `` h1 h2 {wyczyść: oba} `` Aby następny nagłówek zaczynał się w nowej linii (nie pokrywa się z obrazem)
bhar1red
wygląda na to, czego szukam, ale ... jak zrobić CSS? i jak mam to nazwać w Markdown?
Tony D
jest to również świetne rozwiązanie tak samo jak moje :)
OzzyCzech
3
@OzzyCzech - nie, naprawdę nie, twoje rozwiązanie niewłaściwie używa znacznika „alt” obrazu, co może mieć zły wpływ na zgodność z dostępnością na stronie, gdzie to rozwiązanie wykorzystuje podejście nieinwazyjne za pomocą znacznika src.
drżenie
24

Osadzanie CSS jest złe:

![Flowers](/flowers.jpeg)

CSS w innym pliku:

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

źródło
67
Co? Czy teraz nagle musisz edytować plik zewnętrzny za każdym razem, gdy zmieniasz treść przeceny? Nie wydaje mi się to dobrym rozwiązaniem.
Jordan Reiter
9
@JordanReiter Każdy tutaj napisał program składający się z więcej niż jednego pliku, w którym logika jest rozproszona / zorganizowana w wielu lokalizacjach. Robimy to celowo w celu utrzymania. Dlaczego jest to tak boleśnie i strasznie inne?
z5h
8
Markdown pozwala użytkownikom niebędącym programistami tworzyć treści i nie powinno to zależeć od plików, które muszą być bezpośrednio dostępne i edytowane na serwerze. Kolejny przykład: myślę, że całkowicie normalne jest na stałe wpisywanie nazw pól w bazie danych do kodu, ale błąd na sztywno na podstawie wartości pola w bazie danych (tj. if product.name == 'Tulips'), Ponieważ nie można polegać na stabilność wartości. Wystarczy, że ktoś zmieni Flowerssię Floweri nagle ten obraz wyskoczy z pola widzenia. Ponadto muszą do ciebie dzwonić za każdym razem, gdy dodają zdjęcie!
Jordan Reiter
24
@cboettig Jest to poważne niewłaściwe użycie znacznika alt. Powinien to być tekstowy opis obrazu dla osób, które go nie widzą.
Nathan Grigg
5
Dziwi mnie tyle osób płaczących nad tym rozwiązaniem. To piękny hack, niezbędny do rozwiązania problemu niektórych usług hostingowych. Plakat, który dał ten piękny hack, zniknął teraz, a zamiast tego społeczność pozostała z crybabiami.
Aaron Robinson
22

Lubię być bardzo leniwy, używając tabel do wyrównywania obrazów ze |składnią vertical pipe ( ). Jest to obsługiwane przez niektóre smaki Markdown (i jest również obsługiwane przez Textile, jeśli to unosi twoją łódź):

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

lub

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

Nie jest to najbardziej elastyczne rozwiązanie, ale jest dobre dla większości moich prostych potrzeb, jest łatwe do odczytania w formacie markdown i nie musisz pamiętać żadnego CSS ani surowego HTML.

learnvst
źródło
2
Podoba mi się ten styl, bardzo markdown-y. Szkoda, że ​​nie działa na github (i tak jeszcze nie.)
Eliot
3
Właśnie wypróbowałem tę składnię w GitHub i wydaje się, że teraz działa.
Ege Rubak
6
To interesujący hack, ale niewłaściwie wykorzystuje tabele do układania. Witamy w 1999 r.
jxpx777
3
Aby dodać markdown o smaku github, dodaj linię z |-|-|. Mówi parserowi, że istnieje tabela, a pierwszy wiersz to nagłówek. Np .: goo.gl/xUCRiK
Kayla
10

Jeszcze czystsze byłoby po prostu umieścić p#given img { float: right }w arkuszu stylów lub <head>w styletagach i owinąć je . Następnie użyj po prostu markdown ![Alt text](/path/to/img.jpg).

ma11hew28
źródło
8 
<div style="float:left;margin:0 10px 10px 0" markdown="1">
    ![book](/images/book01.jpg)
</div>

Możliwość atrybutu markdownw Markdown.

Peter Mortensen
źródło
1
Pracował dla mnie. Nie używam github. Dzięki @raphox.
Hugo Tavares
Działa dobrze z parserem PHP waniliowej przeceny Michelfa
Ronan
2
Jest to funkcjonalność Markdown Extra, która jest zawarta w niektórych systemach zarządzania treścią (np. Drupal), ale nie jest zawarta w Markdown jako taka.
Tim
7

Podobała mi się odpowiedź learnvst dotycząca używania tabel, ponieważ jest ona dość czytelna (co jest jednym z celów pisania Markdown).

Jednak w przypadku parsera Markdown GitBooka musiałem, oprócz pustej linii nagłówka, dodać pod nią linię separatora, aby tabela została rozpoznana i poprawnie renderowana:

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

Linie separatora muszą zawierać co najmniej trzy myślniki ---.

icarito
źródło
7

Jeśli zaimplementujesz go w Pythonie, istnieje rozszerzenie, które pozwala dodawać pary klucz / wartość HTML oraz etykiety klas / id. Składnia jest następująca:

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

Lub, jeśli osadzona stylizacja nie unosi łodzi,

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

z odpowiednim arkuszem stylów stylish.css:

.floatright {
    float: right;
    /* etc. */
}
Jameh
źródło
2

Jak powiedział Greg , możesz osadzać treść HTML w Markdown, ale jednym z punktów Markdown jest unikanie konieczności posiadania obszernej (lub jakiejkolwiek, w tym przypadku) wiedzy o znacznikach CSS / HTML, prawda? Tym się właśnie zajmuję:

W moim pliku Markdown po prostu polecam wszystkim moim edytorom wiki, aby osadzili zawijanie wszystkich obrazów czymś, co wygląda następująco:

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

(oczywiście .. nie wiedzą, co to <div>znaczy, ale to nie powinno mieć znaczenia)

Plik Markdown wygląda więc tak:

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

[1]: /image/path

A w treści CSS, która otacza całą stronę, mogę zrobić, co chcę z tagiem obrazu:

img {
   float: right;
}

Oczywiście możesz zrobić więcej z zawartością CSS ... (w tym konkretnym przypadku zawinięcie imgtagu div nie pozwala na zawinięcie innego tekstu w obraz ... to jednak tylko przykład), ale IMHO jest celem Markdown jest to, że nie chcesz, aby potencjalnie nietechniczni ludzie mogli wchodzić w tajniki CSS / HTML. To od Ciebie, jako twórcy stron internetowych, zależy, czy treść CSS otacza stronę tak ogólną i czystą, jak to możliwe, ale potem znowu redaktorzy nie muszą o tym wiedzieć.

abbood
źródło
1

Miałem to samo zadanie i dopasowałem swoje obrazy do prawej, dodając to:

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

Aby wyrównać obraz do lewej lub do środka, zamień

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

z

<div style="text-align: center">
<div style="text-align: left">
Zuha Karim
źródło
Próbowałem tego, ale teraz działa .. obraz jest wyrównany, ale wyświetla się tekst HTML.
fiza khan
-1

ta praca dla mnie 

<p align="center">
 <img src="/LogoOfficial.png" width="300" >
</p>
Andersonfrfilho
źródło
-16

Najprostszym jest zawinięcie obrazu w środkowy znacznik, tak jak ...

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

Wszystko, co ma związek z Markdown, można przetestować tutaj - http://daringfireball.net/projects/markdown/dingus

Jasne, <center>może być przestarzałe, ale to proste i działa!

yoyo
źródło
1
Właśnie zauważyłem, że OP poprosił o prawidłowe wyrównanie - próbowałem wyśrodkować obraz, gdy natknąłem się na tę odpowiedź.
yoyo
14
Nie, nigdy nie używaj center.
Jordan Reiter
12
Mam zamiar poprzeć @ yoyo— <center>ma to sens. Jest przestarzały z HTML, ponieważ HTML ma opisywać tylko treść; style powinny znajdować się w arkuszach stylów. Jednak Markdown ma inną intencję: uwzględnić wystarczającą stylizację niezbędną do przekazania wiadomości tekstowej, a resztę pozostawić do renderera / strony. <center>wydaje się o wiele bardziej naturalne niż myślenie o CSS width, floats, margins… - Nawet posunąłbym się tak daleko, że parser Markdown zamienia <center>tagi na odpowiednie elementy wspierane przez CSS, podobnie jak to, jak obecnie inteligentnie oblicza akapity.
Slipp D. Thompson,