Remarcação e alinhamento de imagem

191

Estou criando um site que publica artigos em edições todos os meses. É simples e acho que usar um editor Markdown (como o WMD aqui no Stack Overflow) seria perfeito.

No entanto, eles precisam da capacidade de ter imagens alinhadas à direita em um determinado parágrafo .

Não vejo uma maneira de fazer isso com o sistema atual - é possível?

html css markdown Jedidja
fonte
2
Por que não fazer a pergunta sem o "Estou ajudando um amigo com um site sem fins lucrativos que publica artigos em edições todos os meses"?
JGallardo
11
@JGallardo Porque eu queria deixar claro que não tinha controle completo sobre o sistema, nem tinha a capacidade de comprar qualquer tipo de solução. Concordo que poderia ter formulado a pergunta de maneira diferente.
Jedidja
1
No que diz respeito editores de remarcação, você pode usar o grande stackedit.io/editor# , é incrível para escrever nele :)
AbdelHady
1
@AbdelHady se apenas que tinha sido disponível em 2008 :)
Jedidja
1
@iPython Como uma pergunta de 2008 pode ser uma duplicata de uma pergunta feita quatro anos depois (2012)?
Jedidja

Respostas:

196

Você pode incorporar HTML no Markdown, para fazer algo assim:

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

Continue markdown text...
Greg Hewgill
fonte
43
Limpá-lo e padronizar por strippnig o desnecessário dive adicionar uma barra de fechamento para o imgtag, respectivamente, ou seja, `<img style = "float: right" src = "whatever.jpg"/>
ma11hew28
Em vez de diveu prefiro usar spanpara recuo em linha. Para uma centralização completa do parágrafo divé bom ou até simples p.
do olho
21
Isso funciona melhor com alguns intérpretes higienizados como o do GitHub: <img align = "right" src = "
Whatever.jpg
19
@MattDiPasquale As barras não são necessárias. Isso é XHTML, não HTML.
CaptSaltyJack
Eu tentei isso para incorporar uma imagem em uma postagem de blog fantasma; usando <div style = "float: right"> <img ...> </div> fluiu o seguinte parágrafo ao redor da imagem corretamente, enquanto <img style = "float: right" ...> colocou o parágrafo e a imagem em caixas lado a lado.
Martin DeMello
58

Encontrei uma boa solução no Markdown puro com um pouco de CSS 3 hack :-)

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

Siga a imagem flutuante do código CSS 3 à esquerda ou direita, quando image altterminar com <ou >.

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

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

img[alt$="><"] {
  display: block;
  max-width: 100%;
  height: auto;
  margin: auto;
  float: none!important;
}
OzzyCzech
fonte
1
Onde o CSS deve ser colocado no diretório MkDocs? @YannDuran
Ivan Huang
2
@IvanHuang apenas adicione um arquivo extra.css conforme a documentação do MkDocs e coloque o css nesse arquivo.
Yann Duran
54

Muitos processadores "extras" do Markdown suportam atributos. Então você pode incluir um nome de classe como este (PHP Markdown Extra):

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

ou, alternativamente (Maruku, Kramdown , Python Markdown ):

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

Então, é claro, você pode usar uma folha de estilo da maneira correta: 

.callout {
    float: right;
}

Se o seu suportar esta sintaxe, ele oferece o melhor dos dois mundos: sem marcação incorporada e um resumo da folha de estilo suficiente para não precisar ser modificado pelo seu editor de conteúdo.

Gerwitz
fonte
No momento em que você escreve tudo isso:! Flowers {: .callout} você também pode ter escrito <img src = "/ flowers.jpeg" class = "callout" />
lfalin
1
Eu concordo, mas o Markdown geralmente é escolhido para usuários que não são alfabetizados com * ML; portanto, não há razão para preferir o HTML a qualquer outra sintaxe arbitrária.
Gerwitz
4
("Nenhuma razão" está simplificando demais. É claro que existem muitos motivos de UX para você querer que seus editores se aproximem ou se afastem mais da renderização HTML final. escolheu Markdown para abstrair a técnica de renderização.)
gerwitz 8/15
33

Eu tenho uma alternativa para os métodos acima que usavam a tag ALT e um seletor CSS na tag alt ... Em vez disso, adicione um hash de URL como este:

Primeiro o seu código de imagem do Markdown:

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

Observe o hash da URL adicionado #center.

Agora adicione esta regra no CSS usando os seletores de atributo CSS 3 para selecionar imagens com um determinado caminho.

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

Você deve poder usar um hash de URL como esse quase como definir um nome de classe e não é um mau uso da tag ALT, como algumas pessoas comentaram sobre essa solução. Também não exigirá extensões adicionais. Faça um para flutuar para a direita e para a esquerda também ou quaisquer outros estilos que desejar.

tremor
fonte
1
Exatamente o que eu estava procurando. Você é um salvador da vida. Uma coisa que eu gostaria de acrescentar, é `` `h1 h2 {clear: both}` `` Assim que o próximo título começa em nova linha (não sobreposição com imagem)
bhar1red
parece com o que estou procurando, mas ... como faço para criar um CSS? e como eu o chamo no Markdown?
Tony D
isso também é grande solução mesmos que os meus :)
OzzyCzech
3
@OzzyCzech - não, na verdade, sua solução usa mal a tag "alt" da imagem, o que pode ser ruim para a conformidade de acessibilidade em uma página, onde essa solução usa uma abordagem de não invasão por meio da tag src.
Tremor
24

Incorporar CSS é ruim:

![Flowers](/flowers.jpeg)

CSS em outro arquivo:

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

fonte
67
O que? Agora, de repente, você precisa editar um arquivo externo toda vez que altera o conteúdo da remarcação? Não parece uma boa solução para mim.
Jordan Reiter
9
@JordanReiter Todo mundo aqui escreveu um programa que consiste em mais de um arquivo em que a lógica é espalhada / organizada em muitos locais. Fazemo-lo de propósito para manutenção. Por que isso é tão dolorosamente e terrivelmente diferente?
Z5h 04/04/12
8
O Markdown permite que usuários não programadores criem conteúdo e não deve depender de arquivos que precisam ser acessados ​​e editados diretamente no servidor. Outro exemplo: eu acho que é totalmente normal codificar os nomes dos campos em um banco de dados no seu código, mas um erro de codificar com base no valor de um campo no banco de dados (ou seja if product.name == 'Tulips') porque você não pode depender da estabilidade do valor. Só é preciso alguém mudar Flowerspara Flowere de repente essa imagem aparece fora de vista. Além disso, eles precisam ligar para você sempre que adicionar uma imagem!
Re
24
@cboettig Este é um mau uso grave da tag alt. Supõe-se que seja uma descrição textual da imagem para pessoas que não podem vê-la.
Nathan Grigg
5
Estou impressionado com tantas pessoas chorando por essa solução. Este é um truque bonito, necessário para resolver um problema em certos serviços de hospedagem. O pôster que deu esse belo truque desapareceu agora e, em vez disso, a comunidade fica com bebês chorões.
Aaron Robinson
22

Eu gosto de ser super preguiçoso usando tabelas para alinhar imagens com a |sintaxe vertical pipe ( ). Isso é suportado por alguns sabores do Markdown (e também é suportado pelo Textile se isso flutua no seu barco):

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

ou

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

Não é a solução mais flexível, mas é boa para a maioria das minhas necessidades simples, é fácil de ler no formato de descontos e você não precisa se lembrar de nenhum CSS ou HTML bruto.

learnvst
fonte
2
Eu gosto desse estilo, muito remarcado-y. Pena que não funciona no github (ainda não de qualquer maneira.)
Eliot
3
Eu apenas tentei essa sintaxe no GitHub e ela parece funcionar agora.
Ege Rubak
6
Este é um truque interessante, mas usa tabelas para o layout. Bem-vindo a 1999.
jxpx777 6/15
3
Para a remarcação com sabor do github, adicione uma linha com |-|-|. Diz ao analisador que existe uma tabela e a primeira linha é um cabeçalho. Ex: goo.gl/xUCRiK
Kayla
10

Mesmo mais limpo seria apenas colocar p#given img { float: right }na folha de estilo, ou no <head>e envolto em styletags. Então, basta usar a remarcação ![Alt text](/path/to/img.jpg).

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

A markdownpossibilidade de atributo dentro do Markdown.

Peter Mortensen
fonte
1
Trabalhou para mim. Eu não estou usando o github. Obrigado @raphox.
Hugo Tavares
Funciona bem com michelf de baunilha remarcação PHP parser
Ronan
2
Essa é a funcionalidade Markdown Extra, incluída em alguns sistemas de gerenciamento de conteúdo (por exemplo, Drupal), mas não está incluída na funcionalidade Markdown por si só.
Tim
7

Gostei da resposta do learnvst de usar as tabelas porque é bastante legível (que é um dos objetivos de escrever o Markdown).

No entanto, no caso do analisador Markdown do GitBook, eu tinha que, além de uma linha de cabeçalho vazia, adicionar uma linha separadora abaixo dela, para que a tabela fosse reconhecida e renderizada corretamente:

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

As linhas separadoras precisam incluir pelo menos três traços ---.

icarito
fonte
7

Se você implementá-lo no Python, há uma extensão que permite adicionar pares de chave / valor HTML e rótulos de classe / ID. A sintaxe é para isso é:

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

Ou, se o estilo incorporado não flutuar no seu barco,

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

com uma folha de estilo correspondente stylish.css:

.floatright {
    float: right;
    /* etc. */
}
jameh
fonte
2

Como greg disse, você pode incorporar conteúdo HTML no Markdown, mas um dos pontos do Markdown é evitar ter um conhecimento extenso (ou qualquer, nesse caso) de marcação CSS / HTML, certo? Isto é o que eu faço:

No meu arquivo Markdown, eu simplesmente instruo todos os meus editores do wiki a incorporar todas as imagens com algo parecido com isto:

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

(é claro .. eles não sabem o que <div>significa, mas isso não deveria importar)

Portanto, o arquivo Markdown fica assim:

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

[1]: /image/path

E no conteúdo CSS que envolve a página inteira, posso fazer o que quiser com a tag da imagem:

img {
   float: right;
}

Claro que você pode fazer mais com o conteúdo CSS ... (nesse caso em particular, agrupar a imgtag com div impede que outro texto seja agrupado contra a imagem ... esse é apenas um exemplo), mas IMHO é o ponto de Markdown é que você não deseja que pessoas potencialmente não técnicas entrem nos detalhes do CSS / HTML. Cabe a você, como desenvolvedor da Web, tornar seu conteúdo CSS que envolve a página o mais genérico e limpo possível, mas depois novamente seus editores não precisam saber disso.

abbood
fonte
1

Eu tive a mesma tarefa e alinhei minhas imagens à direita adicionando isto:

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

Para alinhar sua imagem à esquerda ou ao centro, substitua

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

com

<div style="text-align: center">
<div style="text-align: left">
Zuha Karim
fonte
Eu tentei isso, mas agora está funcionando .. a imagem está alinhada, mas o texto html é exibido.
Fiza Khan
-1

esse trabalho pra mim 

<p align="center">
 <img src="/LogoOfficial.png" width="300" >
</p>
Andersonfrfilho
fonte
-16

O mais simples é envolver a imagem em uma tag central, assim ...

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

Qualquer coisa relacionada ao Markdown pode ser testada aqui - http://daringfireball.net/projects/markdown/dingus

Claro, <center>pode ser preterido, mas é simples e funciona!

yoyo
fonte
1
Acabei de notar que o OP solicitou o alinhamento correto - eu estava tentando centralizar uma imagem quando me deparei com essa resposta.
yoyo
14
Não, nunca use center.
perfil completo de Jordan Reiter
12
Na verdade, vou ficar do lado do yoyo - <center>faz sentido. Ele foi descontinuado do HTML porque o HTML deve descrever apenas o conteúdo; os estilos devem estar nas folhas de estilo. No entanto, o Markdown tem uma intenção diferente: incluir estilo suficiente para transmitir uma mensagem de texto e deixar o restante para o representante / site. <center>parece muito mais natural do que pensar em CSS widths, floats, margins ... - Eu chegaria ao ponto de um analisador Markdown substituir as <center>tags por elementos apropriados suportados por CSS, bem como a maneira como ele inteligentemente descobre parágrafos.
Slipp D. Thompson