İşaretleme ve görüntü hizalama

191

Her ay sayılarla ilgili makaleler yayınlayan bir site yapıyorum. Bu basit ve bir Markdown editörü ( Stack Overflow burada WMD gibi ) kullanmak mükemmel olacağını düşünüyorum.

Ancak, belirli bir paragrafta resimlerin sağa hizalı olması gerekir .

Mevcut sistemle bunu yapmanın bir yolunu göremiyorum - bu mümkün mü?

html css markdown

— Jedidja
kaynak

2

Neden "Her ay yayınlanacak kar amacı gütmeyen bir siteye sahip bir arkadaşa yardım ediyorum" sorusu sormadan neden sormuyorsunuz?

— JGallardo

11

@JGallardo Çünkü sistem üzerinde tam bir kontrole sahip olmadığımı veya herhangi bir çözüm satın alma yeteneğim olmadığını netleştirmek istedim. Soruyu farklı şekilde ifade edebileceğimi kabul ediyorum.

— Jedidja

1

Markdown editörleri ile ilgili olarak, harika stackedit.io/editor# kullanabilirsiniz, içine yazmak harika :)

— AbdelHady

1

@AbdelHady sadece 2008'de mevcut olsaydı :)

— Jedidja

1

@iPython 2008 yılındaki bir soru, 4 yıl sonra sorulan sorunun nasıl bir kopyası olabilir (2012)?

— Jedidja

196

HTML'yi Markdown'a gömebilirsiniz, böylece böyle bir şey yapabilirsiniz:

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

Continue markdown text...

— Greg Hewgill
kaynak

43

Temizleyin ve gereksiz olanları sıyırıp etikete divbir kapanış eğik çizgisi ekleyerek standart hale getirin img, yani `` img style = "float: right" src = "whatever.jpg" />

— ma11hew28

Bunun yerine satır içi girinti için divkullanmayı tercih ediyorum span. Tam paragraf diviçin iyi, hatta basit p.

— Göz

21

Bu, GitHub'ınki gibi bazı temizlenmiş tercümanlarla daha iyi çalışır: <img align = "right" src = "whatever.jpg" />

— benweet

19

@MattDiPasquale Kesme eğik çizgileri gerekli değildir. Bu XHTML, HTML değil.

— CaptSaltyJack

ben bir hayalet blog yazı bir görüntü gömmek için çalıştı; <div style = "float: right"> <img ...> </div> kullanmak, aşağıdaki paragrafı görüntünün etrafına doğru akarken, <img style = "float: right" ...> paragrafı ve görüntüyü koy yan yana kutularda.

— Martin DeMello

58

Biraz CSS 3 kesmek ile saf Markdown güzel bir çözüm buldum :-)

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

Sola veya sağa, CSS 3 kod şamandıra görüntüyü izleyin image altile biter <ya >.

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

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

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

— OzzyCzech
kaynak

1

CSS MkDocs dizinine nereye yerleştirilmelidir? @YannDuran

— Ivan Huang

2

@IvanHuang sadece MkDocs belgelerine göre bir extra.css dosyası eklediğinizden emin olun ve css bu dosyaya koyun.

— Yann Duran

54

Birçok Markdown "ekstra" işlemcisi nitelikleri destekler. Böylece böyle bir sınıf adı ekleyebilirsiniz (PHP Markdown Extra):

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

veya alternatif olarak (Maruku, Kramdown , Python Markdown ):

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

Ardından, elbette, bir stil sayfasını doğru şekilde kullanabilirsiniz:

.callout {
    float: right;
}

Sizinki bu sözdizimini destekliyorsa, size her iki dünyanın da en iyisini verir: katıştırılmış işaretleme yok ve içerik düzenleyiciniz tarafından değiştirilmesi gerekmeyecek bir stil sayfası özeti.

— gerwitz
kaynak

Bunların hepsini yazdığınızda:! Çiçekler {: .callout} siz de yazabilirsiniz <img src = "/ flowers.jpeg" class = "callout" />

— lfalin

1

Kabul ediyorum, ancak Markdown genellikle * ML-okuryazar olmayan kullanıcılar için seçilir, bu nedenle HTML'yi diğer rastgele sözdizimine tercih etmek için bir neden yoktur.

— gerwitz

4

("Sebep yok" elbette aşırı basitleştiriyor. Editörlerinizin son HTML oluşturmaya yaklaşmasını veya uzaklaşmasını isteyebileceğiniz birçok UX nedeni olabilir. oluşturma tekniğini

— özetlemek

33

ALT etiketi ve alt etiketi üzerinde bir CSS seçici kullanılan yukarıdaki yöntemlere bir alternatif var ... Bunun yerine, böyle bir URL karma ekleyin:

İlk olarak Markdown resim kodunuz:

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

Eklenen URL karmasını #center unutmayın.

Şimdi belirli bir yola sahip resimleri seçmek için CSS 3 öznitelik seçicileri kullanarak bu kuralı CSS'ye ekleyin.

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

Bunun gibi bir URL karmasını neredeyse bir sınıf adı tanımlamak gibi kullanabilmelisiniz ve bazı kişilerin bu çözüm için yorum yaptığı gibi ALT etiketinin yanlış kullanımı değildir. Ayrıca ek uzantı gerektirmez. Sağ ve sol şamandıra veya istediğiniz diğer stiller için birini yapın.

— titreme
kaynak

1

Tam aradığım şey. Sen hayat kurtarıcısın. Eklemek istediğim bir şey, `` h1 h2 {clear: both} `` `` Bir sonraki başlık yeni satırda başlıyor (resimle örtüşmüyor)

— bhar1red

aradığım şeye benziyor ama ... nasıl CSS yapabilirim? ve Markdown'da nasıl adlandırırım?

— Tony D

bu da benimkiyle aynı harika bir çözüm :)

— OzzyCzech

3

@OzzyCzech - hayır, gerçekten değil, çözümünüz bir sayfadaki erişilebilirlik uyumluluğu için kötü olabilecek resim "alt" etiketini yanlış kullanıyor; bu çözüm, src etiketi aracılığıyla istilacı olmayan bir yaklaşım kullanıyor.

— titreme

24

CSS'yi yerleştirmek kötü:

![Flowers](/flowers.jpeg)

Başka bir dosyadaki CSS:

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

67

Ne? Şimdi birden, markdown içeriğini her değiştirdiğinizde harici bir dosyayı düzenlemeniz gerekiyor mu? Bana iyi bir çözüm gibi gelmiyor.

— Jordan Reiter

9

@JordanReiter Buradaki herkes, mantığın birçok konuma yayıldığı / düzenlendiği birden fazla dosyadan oluşan bir program yazdı. Bunu sürdürülebilirlik amacıyla yapıyoruz. Bu neden bu kadar acı verici ve çok farklı?

— z5h

8

Markdown, programcı olmayan kullanıcıların içerik oluşturmasına izin verir ve sunucuda doğrudan erişilmesi ve düzenlenmesi gereken dosyalara bağlı olmamalıdır. Başka bir örnek: Bir veritabanındaki alanların adlarını kodunuza sabit kodlamak tamamen normaldir, ancak veritabanınızdaki bir alanın değerine (yani if product.name == 'Tulips') göre sabit kodlama hatası , değerin kararlılığı. Tek gereken birisi değişiyor Flowersiçin Flowerve aniden o görüntü görünümün dışına çıkar. Ayrıca, her resim eklediklerinde sizi aramak zorundalar!

— Jordan Reiter

24

@cboettig Bu, alt etiketinin ciddi şekilde kötüye kullanılmasıdır. Görüntüyü göremeyen insanlar için görüntünün metinsel bir açıklaması olması gerekiyordu.

— Nathan Grigg

5

Bu çözümü ağlayan birçok insan beni şaşırttı. Bu, bazı barındırma hizmetleri için bir sorunu çözmek için gerekli güzel bir kesmek. Bu güzel hack'i veren poster şimdi gitti ve bunun yerine topluluk crybabies ile kaldı.

— Aaron Robinson

22

Görüntüleri dikey boru ( |) sözdizimi ile hizalamak için tabloları kullanarak süper tembel olmayı seviyorum . Bu, bazı Markdown lezzetleri tarafından desteklenir (ve teknenizi yüzerse Tekstil tarafından da desteklenir ):

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

veya

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

En esnek çözüm değil, ancak basit ihtiyaçlarımın çoğu için iyi, işaretleme formatında okunması kolay ve herhangi bir CSS veya ham HTML'yi hatırlamanıza gerek yok.

— learnvst
kaynak

2

Bu tarzı seviyorum, çok markdown-y. Github'da işe yaramayacak kadar kötü (henüz değil)

— Eliot

3

Bu sözdizimini GitHub'da denedim ve şimdi çalışıyor gibi görünüyor.

— Ege Rubak

6

Bu ilginç bir hack, ancak düzen için tabloları yanlış kullanıyor. 1999'a hoş geldiniz.

— jxpx777

3

Github aromalı işaretleme için ile bir satır ekleyin |-|-|. Ayrıştırıcıya bir tablo olduğunu ve ilk satırın bir başlık olduğunu söyler. Örn: goo.gl/xUCRiK

— Kayla

10

Hatta daha temiz sadece koymak olacaktır p#given img { float: right }stil sayfasında veya içinde <head>ve sarılı styleetiketleri. Ardından, işaretlemeyi kullanın ![Alt text](/path/to/img.jpg).

— ma11hew28
kaynak

8

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

markdownMarkdown içinde özellik olasılığı.

— Peter Mortensen
kaynak

1

Bana çalıştı. Ben github kullanmıyorum. Teşekkürler @raphox.

— Hugo Tavares

İle para cezası Çalışır michelf en vanilyalı markdown PHP'nin

— Ronan

2

Bu, bazı içerik yönetim sistemlerinde (örn. Drupal) bulunan ancak Markdown'da işlevsellik içermeyen Markdown Extra işlevidir.

— Tim

7

Learnvst'nin cevabını beğendim tabloları kullanarak çünkü oldukça okunabilir (Markdown yazmanın bir amacı).

Ancak GitBook'un Markdown ayrıştırıcısı durumunda, tablonun tanınması ve düzgün bir şekilde oluşturulması için boş bir başlık satırına ek olarak altına bir ayırıcı satır eklemem gerekiyordu:

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

Ayırıcı çizgilerin en az üç tire içermesi gerekir ---.

— icarito
kaynak

7

Python'a uygularsanız, HTML anahtar / değer çiftleri ve sınıf / kimlik etiketleri eklemenize izin veren bir uzantı vardır. Sözdizimi bunun içindir:

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

Veya gömülü stil teknenizi yüzmezse,

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

karşılık gelen bir stil sayfası ile stylish.css:

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

— Jameh
kaynak

2

Greg'in dediği gibi HTML içeriğini Markdown'a gömebilirsiniz, ancak Markdown'un noktalarından biri kapsamlı CSS / HTML biçimlendirme bilgisine sahip olmaktan kaçınmaktır, değil mi? Bu benim işim:

Markdown dosyamda, tüm wiki editörlerime tüm görüntüleri şu şekilde görünen bir şeyle sarmaları talimatını veriyorum:

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

(elbette .. ne olduğunu bilmiyorlar <div> anlama geldiğini , ama bu önemli değil)

Markdown dosyası şöyle görünür:

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

[1]: /image/path

Ve tüm sayfayı saran CSS içeriğinde resim etiketi ile istediğimi yapabilirim:

img {
   float: right;
}

Tabii ki CSS içeriği ile daha fazlasını yapabilirsiniz ... (bu özel durumda, imgetiketi div ile sarmak, diğer metnin görüntüye sarılmasını önler ... bu sadece bir örnektir), ancak IMHO Markdown'un noktası potansiyel olarak teknik olmayan kişilerin CSS / HTML giriş ve çıkışlarına girmesini istemediğinizdir .. sayfayı mümkün olduğunca genel ve temiz bir şekilde saran CSS içeriğinizi yapmak bir web geliştiricisi olarak size kalmış, ancak daha sonra yine editörlerinizin bunu bilmesine gerek yok.

— abbood
kaynak

1

Aynı görevi yaptım ve bunu ekleyerek resimlerimi sağa hizaladım:

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

Görüntünüzü sola veya ortaya hizalamak için değiştirin

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

ile

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

— Zuha Karim
kaynak

Bunu denedim ama şimdi çalışıyor .. görüntü hizalı ama html metni görüntülenir.

— fiza khan

-1

bu iş benim için

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

— Andersonfrfilho
kaynak

-16

En basit, görüntüyü orta bir etikete sarmaktır ...

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

Markdown ile ilgili her şey burada test edilebilir - http://daringfireball.net/projects/markdown/dingus

Tabii, <center>itiraz edilebilir, ama basit ve işe yarıyor!

— yo-yo
kaynak

1

OP'nin doğru hizalama istediğini fark ettim - bu cevaba tökezlediğimde bir görüntüyü merkezlemeye çalışıyordum.

— yoyo

14

Hayır, asla kullanma center.

— Jordan Reiter

12

Aslında @ yoyo ile yan yana olacağım - <center>mantıklı. HTML'nin yalnızca içeriği tanımlaması gerektiği için HTML'den kaldırılmıştır; stiller, stil sayfalarında olmalıdır. Bununla birlikte, Markdown'un farklı bir amacı vardır: metin mesajını iletmek için gerekli stilleri dahil etmek ve gerisini işleyiciye / siteye bırakmak. <center>CSS widths, floats, margins hakkında düşünmekten çok daha doğal görünüyor ... - Markdown ayrıştırıcısının <center>şu anda akıllıca paragrafları nasıl anladığı gibi , uygun CSS destekli öğelerle etiketleri değiştirmesini bile istiyorum .

— Slipp D.Thompson