Đánh dấu và căn chỉnh hình ảnh

189

Tôi đang làm cho một trang web xuất bản các bài báo trong các vấn đề mỗi tháng. Điều này rất đơn giản và tôi nghĩ rằng việc sử dụng trình soạn thảo Markdown (như WMD ở đây trong Stack Overflow) sẽ hoàn hảo.

Tuy nhiên, họ cần có khả năng để hình ảnh được căn phải trong một đoạn nhất định .

Tôi không thể thấy một cách để làm điều đó với hệ thống hiện tại - có thể không?

html css markdown

— Jedidja
nguồn

2

Tại sao không chỉ đặt câu hỏi mà không có câu "Tôi đang giúp đỡ một người bạn với một trang web phi lợi nhuận xuất bản các bài báo về các vấn đề mỗi tháng"?

— JGallardo

11

@JGallardo Vì tôi muốn làm rõ rằng tôi không có quyền kiểm soát hoàn toàn hệ thống, tôi cũng không có khả năng mua bất kỳ loại giải pháp nào. Tôi đồng ý rằng tôi có thể đặt câu hỏi khác nhau.

— Jedidja

1

Liên quan đến các biên tập viên markdown, bạn có thể sử dụng stackedit.io/editor# tuyệt vời để viết trong đó :)

— AbdelHady 15/2/2015

1

@AbdelHady nếu chỉ có nó vào năm 2008 :)

— Jedidja 16/2/2015

1

@iPython Làm thế nào một câu hỏi từ năm 2008 có thể là một bản sao của một câu hỏi được hỏi 4 năm sau (2012)?

— Jedidja

191

Bạn có thể nhúng HTML vào Markdown, vì vậy bạn có thể làm một cái gì đó như thế này:

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

Continue markdown text...

— Greg Hewgill
nguồn

42

Dọn dẹp & chuẩn hóa bằng cách tước đi những thứ không cần thiết divvà thêm dấu gạch chéo vào imgthẻ, tương ứng, ví dụ `<img style =" float: right "src ="

— anything.jpg

Thay vì divtôi thích sử dụng spanđể thụt dòng nội tuyến. Đối với trung tâm đoạn đầy đủ divlà tốt, hoặc thậm chí đơn giản p.

— Mắt

21

Điều này hoạt động tốt hơn với một số trình thông dịch được vệ sinh như của GitHub: <img align = "right" src = "

— anything.jpg

19

@MattDiPasquale Chém chém là không cần thiết. Đó là XHTML, không phải HTML.

— CaptSaltyJack

tôi đã thử điều này để nhúng một hình ảnh trong một bài đăng trên blog ma; sử dụng <div style = "float: right"> <img ...> </ div> đã chuyển đoạn văn sau xung quanh hình ảnh một cách chính xác, trong khi <img style = "float: right" ...> đặt đoạn văn và hình ảnh trong hộp cạnh nhau.

— Martin DeMello

57

Tôi đã tìm thấy một giải pháp hay trong Markdown thuần túy với một chút hack CSS 3 :-)

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

Thực hiện theo hình ảnh nổi mã CSS 3 ở bên trái hoặc bên phải, khi image altkết thúc bằng <hoặc >.

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

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

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

— OzzyC Dix
nguồn

CSS nên được đặt ở đâu trong thư mục MkDocs? @YannDuran

— Ivan Huang

1

@IvanHuang chỉ cần đảm bảo rằng bạn thêm một extra.css tập tin theo các tài liệu MkDocs, và đặt các css trong tập tin đó.

— Yann Duran

54

Nhiều bộ xử lý Markdown "phụ" hỗ trợ các thuộc tính. Vì vậy, bạn có thể bao gồm một tên lớp như vậy (PHP Markdown Extra):

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

hoặc, cách khác (Maruku, Kramdown , Python Markdown ):

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

Sau đó, tất nhiên, bạn có thể sử dụng biểu định kiểu theo cách thích hợp:

.callout {
    float: right;
}

Nếu bạn hỗ trợ cú pháp này, nó sẽ cung cấp cho bạn cả hai thế giới tốt nhất: không có đánh dấu nhúng và bản tóm tắt bản định kiểu đủ để không cần phải sửa đổi bởi trình chỉnh sửa nội dung của bạn.

— gerwitz
nguồn

Đến lúc bạn viết tất cả những điều này :! Hoa {: .callout} bạn cũng có thể đã viết <img src = "/ hoa.jpeg" class = "chú thích" />

— lfalin

1

Tôi đồng ý, nhưng Markdown thường được chọn cho những người dùng không biết chữ * ML vì vậy không có lý do gì để thích HTML hơn bất kỳ cú pháp tùy ý nào khác.

— gerwitz

4

(Tất nhiên là "không có lý do" đơn giản hóa quá mức. Có nhiều lý do UX mà bạn có thể muốn các biên tập viên của mình tiến gần hơn hoặc xa hơn từ kết xuất HTML cuối cùng. Hoặc bạn có thể không thích giới thiệu một phụ thuộc HTML trong nội dung của mình, nếu bạn 'đã chọn Markdown để trừu tượng hóa kỹ thuật kết xuất.)

— gerwitz

33

Tôi có một phương pháp thay thế cho các phương pháp ở trên đã sử dụng thẻ ALT và bộ chọn CSS trên thẻ alt ... Thay vào đó, hãy thêm một hàm băm URL như thế này:

Đầu tiên mã hình ảnh Markdown của bạn:

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

Lưu ý thêm URL băm #center.

Bây giờ thêm quy tắc này trong CSS bằng cách sử dụng bộ chọn thuộc tính CSS 3 để chọn hình ảnh với một đường dẫn nhất định.

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

Bạn sẽ có thể sử dụng hàm băm URL như thế này gần giống như xác định tên lớp và đó không phải là lạm dụng thẻ ALT như một số người đã nhận xét về giải pháp đó. Nó cũng sẽ không yêu cầu bất kỳ phần mở rộng bổ sung. Làm một cái cho nổi phải và trái cũng như bất kỳ phong cách nào bạn có thể muốn.

— rung chuyen
nguồn

1

Chính xác những gì tôi đang tìm kiếm. Bạn là một vị cứu tinh. Một điều tôi muốn thêm vào là `` `h1 h2 {clear: Cả}` `` Vì vậy, tiêu đề tiếp theo bắt đầu trong dòng mới (không trùng lặp với hình ảnh)

— bhar1red

trông giống như những gì tôi đang tìm kiếm nhưng ... làm cách nào để tạo CSS? và làm thế nào để tôi gọi nó trong Markdown?

— Tony D

đây cũng là giải pháp tuyệt vời giống như của tôi :)

— OzzyC817

3

@OzzyC817 - không thực sự, giải pháp của bạn sử dụng sai thẻ "alt" hình ảnh có thể không tốt cho việc tuân thủ khả năng truy cập trên một trang, trong đó giải pháp này sử dụng phương pháp không xâm lấn thông qua thẻ src.

— run rẩy

24

Nhúng CSS là xấu:

![Flowers](/flowers.jpeg)

CSS trong một tệp khác:

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

67

Gì? Bây giờ bạn có bất ngờ phải chỉnh sửa một tệp bên ngoài mỗi khi bạn thay đổi nội dung đánh dấu không? Nghe có vẻ không phải là một giải pháp tốt cho tôi.

— Jordan Reiter

9

@JordanReiter Mọi người ở đây đã viết một chương trình bao gồm nhiều hơn một tệp trong đó logic được lan truyền / tổ chức trên nhiều địa điểm. Chúng tôi làm nó trên mục đích để duy trì. Tại sao điều này lại rất đau đớn và khác biệt khủng khiếp?

— z5h

8

Markdown cho phép người dùng không phải lập trình viên tạo nội dung và không nên phụ thuộc vào các tệp phải được truy cập và chỉnh sửa trực tiếp trên máy chủ. Một ví dụ khác: Tôi nghĩ việc mã hóa tên các trường trong cơ sở dữ liệu thành mã của bạn là hoàn toàn bình thường nhưng lại nhầm với mã cứng dựa trên giá trị của một trường trong cơ sở dữ liệu của bạn (ví dụ if product.name == 'Tulips') vì bạn không thể phụ thuộc vào tính ổn định của giá trị. Tất cả phải mất là một người nào đó thay đổi Flowersđể Flowervà đột nhiên hình ảnh mà bật ra khỏi tầm nhìn. Ngoài ra, họ phải gọi cho bạn mỗi khi họ thêm hình ảnh!

— Jordan Reiter

24

@cboettig Đây là sự lạm dụng nghiêm trọng của thẻ alt. Nó được coi là một mô tả văn bản của hình ảnh cho những người không thể nhìn thấy hình ảnh.

— Nathan Grigg

5

Tôi ngạc nhiên rất nhiều người khóc vì giải pháp này. Đây là một bản hack đẹp, cần thiết để giải quyết vấn đề cho một số dịch vụ lưu trữ nhất định. Người đăng tải bản hack tuyệt đẹp này đã biến mất ngay bây giờ và thay vào đó cộng đồng chỉ còn lại những tiếng khóc.

— Aaron Robinson

22

Tôi thích siêu lười biếng bằng cách sử dụng các bảng để căn chỉnh hình ảnh với |cú pháp pipe ( ) dọc . Điều này được hỗ trợ bởi một số hương vị Markdown (và cũng được hỗ trợ bởi Dệt nếu điều đó làm nổi thuyền của bạn):

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

hoặc là

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

Nó không phải là giải pháp linh hoạt nhất, nhưng nó tốt cho hầu hết các nhu cầu đơn giản của tôi, dễ đọc ở định dạng đánh dấu và bạn không cần phải nhớ bất kỳ CSS hoặc HTML thô nào.

— học hỏi
nguồn

2

Tôi thích phong cách này, rất markdown-y. Quá tệ, nó không hoạt động trên github (dù sao đi nữa.)

— Eliot

3

Tôi vừa thử cú pháp này tại GitHub và nó dường như hoạt động ngay bây giờ.

— Ege Rubak

6

Đây là một hack thú vị, nhưng nó lạm dụng các bảng để bố trí. Chào mừng đến năm 1999.

— jxpx777

3

Đối với đánh dấu hương vị github, thêm một dòng với |-|-|. Nó báo cho trình phân tích cú pháp rằng có một bảng và dòng đầu tiên là một tiêu đề. Vd: goo.gl/xUCRiK

— Kayla

10

Thậm chí sạch hơn sẽ chỉ là đặt p#given img { float: right }trong biểu định kiểu, hoặc trong <head>và bọc trong stylecác thẻ. Sau đó, chỉ cần sử dụng markdown ![Alt text](/path/to/img.jpg).

— ma11hew28
nguồn

8

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

markdownKhả năng thuộc tính bên trong Markdown.

— Peter Mortensen
nguồn

1

Làm việc với tôi. Tôi không sử dụng github. Cảm ơn @raphox.

— Hugo Tavares

Hoạt động tốt với trình phân tích cú pháp PHP đánh dấu vanilla của michelf

— Ronan

2

Đây là chức năng Markdown Extra, được bao gồm trong một số hệ thống quản lý nội dung (ví dụ: Drupal), nhưng không bao gồm chức năng trong Markdown per se.

— Tim

7

Tôi thích câu trả lời của learnvst về việc sử dụng các bảng vì nó khá dễ đọc (đó là một mục đích của việc viết Markdown).

Tuy nhiên, trong trường hợp trình phân tích cú pháp Markdown của GitBook, tôi phải thêm vào một dòng tiêu đề trống, thêm một dòng phân cách bên dưới nó, để bảng được nhận dạng và hiển thị đúng:

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

Các dòng phân cách cần bao gồm ít nhất ba dấu gạch ngang ---.

— icarito
nguồn

7

Nếu bạn triển khai nó trong Python, có một phần mở rộng cho phép bạn thêm các cặp khóa / giá trị HTML và nhãn lớp / id. Cú pháp cho việc này là:

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

Hoặc, nếu kiểu dáng nhúng không làm nổi thuyền của bạn,

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

với biểu định kiểu tương ứng , stylish.css:

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

— jameh
nguồn

2

Như greg nói bạn có thể nhúng nội dung HTML vào Markdown, nhưng một trong những điểm của Markdown là tránh phải có kiến thức đánh dấu CSS / HTML mở rộng (hoặc bất kỳ vấn đề nào), phải không? Đây là những gì tôi làm:

Trong tệp Markdown của tôi, tôi chỉ cần hướng dẫn tất cả các biên tập viên wiki của mình nhúng tất cả các hình ảnh với một cái gì đó trông như thế này:

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

(tất nhiên .. họ không biết <div>nghĩa là gì , nhưng điều đó không quan trọng)

Vì vậy, tệp Markdown trông như thế này:

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

[1]: /image/path

Và trong nội dung CSS bao bọc toàn bộ trang, tôi có thể làm bất cứ điều gì tôi muốn với thẻ hình ảnh:

img {
   float: right;
}

Tất nhiên bạn có thể làm nhiều hơn với nội dung CSS ... (trong trường hợp cụ thể này, việc bọc imgthẻ bằng div sẽ ngăn văn bản khác quấn vào hình ảnh ... tuy nhiên đây chỉ là một ví dụ), nhưng IMHO điểm của Markdown là bạn không muốn những người không có kỹ thuật tiềm năng tham gia vào CSS / HTML .. bạn phải là nhà phát triển web để làm cho nội dung CSS của bạn bao bọc trang chung chung và sạch nhất có thể, nhưng sau đó một lần nữa các biên tập viên của bạn không cần biết về điều đó.

— tu viện
nguồn

1

Tôi đã có cùng một nhiệm vụ và tôi căn chỉnh hình ảnh của mình sang bên phải bằng cách thêm vào đây:

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

Để căn chỉnh hình ảnh của bạn sang trái hoặc giữa, thay thế

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

với

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

— Zuha Karim
nguồn

Tôi đã thử điều này nhưng nó hiện đang hoạt động .. hình ảnh được căn chỉnh nhưng văn bản html hiển thị.

— fiza khan

-1

công việc này cho tôi

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

— Andersonfrfilho
nguồn

-16

Đơn giản nhất là bọc hình ảnh trong một thẻ trung tâm, như vậy ...

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

Bất cứ điều gì để làm với Markdown đều có thể được kiểm tra tại đây - http://daredfireball.net/projects/markdown/dingus

Chắc chắn, <center>có thể không được chấp nhận, nhưng nó đơn giản và nó hoạt động!

— yoyo
nguồn

1

Chỉ cần chú ý OP yêu cầu căn chỉnh đúng - tôi đang cố gắng căn giữa một hình ảnh khi tôi vấp phải câu trả lời này.

— yoyo

14

Không, không bao giờ sử dụng center.

— Jordan Reiter

12

Tôi thực sự sẽ ở bên cạnh @ yoyo, <center>thật có ý nghĩa. Nó không được dùng từ HTML vì HTML chỉ được dùng để mô tả nội dung; phong cách nên được trong bảng định kiểu. Tuy nhiên, Markdown có một mục đích khác: bao gồm đủ kiểu dáng cần thiết để truyền tải một thông điệp văn bản và để phần còn lại cho trình kết xuất / trang web. <center>có vẻ tự nhiên hơn nhiều so với suy nghĩ về CSS width, floats - margins - Tôi thậm chí còn đi xa hơn khi có một trình phân tích cú pháp Markdown thay thế <center>các thẻ bằng các phần tử được hỗ trợ CSS thích hợp, giống như cách nó hiện ra một cách thông minh các đoạn văn.

— Slipp D. Thompson