Penurunan harga dan penyelarasan gambar

191

Saya membuat situs yang menerbitkan artikel dalam edisi setiap bulan. Sangat mudah, dan saya pikir menggunakan editor Markdown (seperti WMD di Stack Overflow) akan menjadi sempurna.

Namun, mereka memang membutuhkan kemampuan untuk memiliki gambar yang tepat di paragraf yang diberikan .

Saya tidak dapat melihat cara untuk melakukan itu dengan sistem saat ini - apakah mungkin?

html css markdown Jedidja
sumber

2

Mengapa tidak mengajukan pertanyaan tanpa "Saya membantu teman dengan situs nirlaba yang menerbitkan artikel dalam masalah setiap bulan"?

JGallardo

11

@JGallardo Karena saya ingin menjelaskan saya tidak memiliki kendali penuh atas sistem, saya juga tidak memiliki kemampuan untuk membeli segala jenis solusi. Saya setuju bahwa saya bisa mengutarakan pertanyaan secara berbeda.

Jedidja

1

Mengenai editor penurunan harga, Anda dapat menggunakan stackedit.io/editor# yang hebat , sangat menyenangkan untuk menuliskannya :)

AbdelHady

1

@AbdelHady andai saja sudah tersedia pada 2008 :)

Jedidja

1

@iPython Bagaimana pertanyaan dari tahun 2008 dapat menjadi duplikat dari pertanyaan yang diajukan 4 tahun kemudian (2012)?

Jedidja

196

Anda dapat menanamkan HTML di Penurunan harga, sehingga Anda dapat melakukan sesuatu seperti ini:

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

Continue markdown text...

Greg Hewgill
sumber

43

Bersihkan & standarisasi dengan menghapus masing-masing yang tidak perlu divdan menambahkan slash penutup ke imgtag, yaitu `<img style =" float: right "src =" whatever.jpg "/>

ma11hew28

Daripada divsaya lebih suka menggunakan spanuntuk indentasi inline. Untuk pemusatan paragraf penuh divitu bagus, atau bahkan sederhana p.

Mata

21

Ini bekerja lebih baik dengan beberapa penerjemah yang disanitasi seperti yang dimiliki GitHub: <img align = "right" src = "whatever.jpg" />

benweet

19

@MattDiPasquale Memotong garis miring tidak perlu. Itu XHTML, bukan HTML.

CaptSaltyJack

Saya mencoba ini untuk menanamkan gambar dalam posting blog hantu; menggunakan <div style = "float: right"> <img ...> </div> mengalirkan paragraf berikut di sekitar gambar dengan benar, sedangkan <img style = "float: right" ...> letakkan paragraf dan gambar dalam kotak berdampingan.

Martin DeMello

58

Saya menemukan solusi yang bagus dalam penurunan harga murni dengan hack CSS 3 kecil :-)

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

Ikuti kode CSS 3 float image di sebelah kiri atau kanan, ketika image altberakhir dengan <atau >.

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

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

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

OzzyCzech
sumber

1

Di mana seharusnya CSS ditempatkan di direktori MkDocs? @YannDuran

Ivan Huang

2

@IvanHuang pastikan Anda menambahkan file extra.css sesuai dokumentasi MkDocs, dan letakkan css di file itu.

Yann Duran

54

Banyak atribut Markdown "ekstra" mendukung atribut. Jadi Anda bisa memasukkan nama kelas seperti itu (PHP Markdown Extra):

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

atau, sebagai alternatif (Maruku, Kramdown , Python Markdown ):

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

Kemudian, tentu saja, Anda dapat menggunakan stylesheet dengan cara yang benar:

.callout {
    float: right;
}

Jika Anda mendukung sintaks ini, ini memberi Anda yang terbaik dari kedua dunia: tidak ada markup yang disematkan, dan abstrak stylesheet yang cukup untuk tidak perlu dimodifikasi oleh editor konten Anda.

Gerwitz
sumber

Pada saat Anda menulis semua ini:! Flowers {: .callout} Anda mungkin juga telah menulis <img src = "/ flowers.jpeg" class = "callout" />

lfalin

1

Saya setuju, tetapi Penurunan harga sering dipilih untuk pengguna yang tidak * ML-melek sehingga tidak ada alasan untuk memilih HTML daripada sintaksis sewenang-wenang lainnya.

gerwitz

4

("Tidak ada alasan" tentu saja terlalu menyederhanakan. Ada banyak alasan UX Anda mungkin ingin editor Anda lebih dekat atau lebih jauh dari rendering HTML akhir. Atau Anda mungkin enggan memperkenalkan ketergantungan HTML pada konten Anda, jika Anda sudah memilih Markdown untuk abstrak teknik rendering.)

gerwitz

33

Saya punya alternatif untuk metode di atas yang menggunakan tag ALT dan pemilih CSS pada tag alt ... Sebaliknya, tambahkan hash URL seperti ini:

Pertama kode gambar penurunan harga Anda:

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

Perhatikan hash #center URL yang ditambahkan.

Sekarang tambahkan aturan ini dalam CSS menggunakan pemilih atribut CSS 3 untuk memilih gambar dengan jalur tertentu.

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

Anda harus dapat menggunakan hash URL seperti ini hampir seperti mendefinisikan nama kelas dan itu bukan penyalahgunaan tag ALT seperti beberapa orang berkomentar tentang solusi itu. Itu juga tidak akan memerlukan ekstensi tambahan. Lakukan satu untuk mengapung ke kanan dan kiri juga atau gaya lain yang Anda inginkan.

getaran
sumber

1

Persis apa yang saya cari. Anda adalah penyelamat hidup. Satu hal yang ingin saya tambahkan, adalah `` `h1 h2 {clear: both}` `` Sehingga tajuk berikutnya dimulai pada baris baru (tidak tumpang tindih dengan gambar)

bhar1red

sepertinya apa yang saya cari tetapi ... bagaimana cara membuat CSS? dan bagaimana saya menyebutnya dalam penurunan harga?

Tony D

ini juga solusi hebat sama seperti milik saya :)

OzzyCzech

3

@OzzyCzech - tidak benar-benar, solusi Anda menyalahgunakan tag "alt" gambar yang mungkin buruk untuk kepatuhan aksesibilitas pada halaman, di mana solusi ini menggunakan pendekatan non-invasi melalui tag src.

tremor

24

Menanamkan CSS adalah buruk:

![Flowers](/flowers.jpeg)

CSS di file lain:

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

sumber

67

Apa? Sekarang tiba-tiba Anda harus mengedit file eksternal setiap kali Anda mengubah konten penurunan harga? Kedengarannya bukan solusi yang baik untuk saya.

Jordan Reiter

9

@JordanReiter Setiap orang di sini telah menulis sebuah program yang terdiri dari lebih dari satu file di mana logika tersebar / diorganisasikan ke banyak lokasi. Kami melakukannya dengan sengaja untuk pemeliharaan. Mengapa ini begitu menyakitkan dan sangat berbeda?

z5h

8

Penurunan harga memungkinkan pengguna non-programmer membuat konten dan seharusnya tidak tergantung pada file yang harus diakses dan diedit langsung di server. Contoh lain: Saya pikir itu benar-benar normal untuk meng-hard-code nama - nama field dalam database ke dalam kode Anda tetapi kesalahan pada hard-code berdasarkan pada nilai field dalam database Anda (yaitu if product.name == 'Tulips') karena Anda tidak dapat bergantung pada stabilitas nilai. Yang dibutuhkan adalah seseorang berubah Flowersuntuk Flowerdan tiba-tiba gambar yang muncul keluar dari pandangan. Juga, mereka harus menghubungi Anda setiap kali mereka menambahkan gambar!

Jordan Reiter

24

@cboettig Ini adalah penyalahgunaan tag alt. Seharusnya deskripsi teks dari gambar untuk orang-orang yang tidak dapat melihat gambar.

Nathan Grigg

5

Saya kagum begitu banyak orang menangisi solusi ini. Ini adalah retasan yang indah, diperlukan untuk memecahkan masalah bagi layanan hosting tertentu. Poster yang memberikan peretasan indah ini hilang sekarang dan sebagai gantinya komunitas dibiarkan dengan cengeng.

Aaron Robinson

22

Saya suka menjadi sangat malas dengan menggunakan tabel untuk menyelaraskan gambar dengan |sintaks pipa vertikal ( ). Ini didukung oleh beberapa rasa penurunan harga (dan juga didukung oleh Tekstil jika itu mengapung kapal Anda):

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

atau

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

Ini bukan solusi yang paling fleksibel, tetapi bagus untuk sebagian besar kebutuhan sederhana saya, mudah dibaca dalam format penurunan harga, dan Anda tidak perlu mengingat CSS atau HTML mentah.

belajar
sumber

2

Saya suka gaya ini, sangat penurunan harga-y. Sayang sekali itu tidak bekerja pada github (belum lagi.)

Eliot

3

Saya baru saja mencoba sintaks ini di GitHub dan tampaknya berfungsi sekarang.

Ege Rubak

6

Ini adalah retasan yang menarik, tetapi ini menyalahgunakan tabel untuk tata letak. Selamat Datang di 1999.

jxpx777

3

Untuk penurunan harga rasa github, tambahkan garis dengan |-|-|. Ini memberitahu parser bahwa ada tabel, dan baris pertama adalah header. Contoh: goo.gl/xUCRiK

Kayla

10

Bahkan lebih bersih akan hanya dimasukkan ke p#given img { float: right }dalam lembar gaya, atau <head>di styletag dan dibungkus . Kemudian, cukup gunakan markdown ![Alt text](/path/to/img.jpg).

ma11hew28
sumber

8

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

markdownKemungkinan atribut di dalam Markdown.

Peter Mortensen
sumber

1

Bekerja untukku. Saya tidak menggunakan github. Terima kasih @raphox.

Hugo Tavares

Bekerja baik dengan michelf ini vanili penurunan harga PHP parser

Ronan

2

Ini adalah fungsi Markdown Extra, yang termasuk dalam beberapa sistem manajemen konten (mis. Drupal), tetapi tidak termasuk fungsionalitas dalam penurunan harga per se.

Tim

7

Saya suka jawaban learnvst menggunakan tabel karena cukup mudah dibaca (yang merupakan salah satu tujuan penulisan penurunan harga).

Namun, dalam kasus parser Markdown GitBook, saya harus menambahkan baris pemisah di bawahnya, agar tabel dapat dikenali dan diterjemahkan dengan benar:

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

Garis pemisah harus menyertakan setidaknya tiga tanda hubung ---.

icarito
sumber

7

Jika Anda menerapkannya dalam Python, ada ekstensi yang memungkinkan Anda menambahkan pasangan kunci / nilai HTML, dan label kelas / id. Sintaksnya adalah:

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

Atau, jika gaya yang disematkan tidak mengapungkan perahu Anda,

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

dengan stylesheet yang sesuai, stylish.css:

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

jameh
sumber

2

Seperti yang dikatakan greg , Anda dapat menyematkan konten HTML dalam Markdown, tetapi salah satu poin dari Markdown adalah untuk menghindari keharusan memiliki pengetahuan luas tentang markup CSS / HTML, bukan? Inilah yang saya lakukan:

Dalam file penurunan harga saya, saya hanya menginstruksikan semua editor wiki saya untuk menanamkan bungkus semua gambar dengan sesuatu yang terlihat seperti ini:

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

(tentu saja .. mereka tidak tahu apa <div>artinya, tapi itu tidak masalah)

Jadi file Penurunan harga terlihat seperti ini:

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

[1]: /image/path

Dan dalam konten CSS yang membungkus seluruh halaman saya dapat melakukan apa pun yang saya inginkan dengan tag gambar:

img {
   float: right;
}

Tentu saja Anda dapat melakukan lebih banyak dengan konten CSS ... (dalam kasus khusus ini, membungkus imgtag dengan div mencegah teks lainnya membungkus gambar ... ini hanyalah sebuah contoh), tetapi IMHO titik Markdown adalah bahwa Anda tidak ingin orang yang berpotensi non-teknis masuk ke seluk beluk CSS / HTML .. itu terserah Anda sebagai pengembang web untuk membuat konten CSS Anda yang membungkus halaman sebagai generik dan sebersih mungkin, tapi kemudian lagi editor Anda tidak perlu tahu tentang itu.

abbood
sumber

1

Saya memiliki tugas yang sama, dan saya meluruskan gambar saya ke kanan dengan menambahkan ini:

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

Untuk menyelaraskan gambar Anda ke kiri atau tengah, ganti

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

dengan

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

Zuha Karim
sumber

Saya mencoba ini tetapi sekarang berfungsi .. gambar disejajarkan tetapi teks html ditampilkan.

fiza khan

-1

ini bekerja untuk saya

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

Andersonfrfilho
sumber

-16

Paling sederhana adalah untuk membungkus gambar dalam tag tengah, seperti ...

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

Apa pun yang berkaitan dengan Markdown dapat diuji di sini - http://daringfireball.net/projects/markdown/dingus

Tentu, <center>mungkin sudah usang, tetapi sederhana dan berhasil!

yoyo
sumber

1

Hanya memperhatikan OP yang meminta perataan yang benar - saya mencoba memusatkan gambar ketika saya menemukan jawaban ini.

yoyo

14

Tidak, jangan pernah gunakan center.

Jordan Reiter

12

Aku akan benar-benar memihak @ yoyo — <center>masuk akal. Ini sudah tidak digunakan lagi karena HTML seharusnya hanya menggambarkan konten; style harus dalam stylesheet. Namun, Markdown memiliki maksud yang berbeda: untuk menyertakan cukup gaya yang diperlukan untuk menyampaikan pesan teks, dan menyerahkan sisanya ke penyaji / situs. <center>tampaknya jauh lebih alami daripada berpikir tentang CSS widths, floats, margins ... - Saya bahkan akan pergi sejauh memiliki parser ganti Markdown <center>dengan elemen yang didukung CSS yang tepat, seperti bagaimana saat ini secara cerdas mencari paragraf.

Slipp D. Thompson

Penurunan harga dan penyelarasan gambar

Jawaban: