Alinhamento de marcação e imagem
https://stackoverflow.com/questions/255170
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPergunta
Estou criando um site que publica artigos em edições a cada mês. É direto, e acho que usar um editor de marcação (como o WMD um aqui no transbordamento da pilha) seria perfeito.
No entanto, Eles precisam da capacidade de ter imagens alinhadas em um determinado parágrafo.
Não consigo ver uma maneira de fazer isso com o sistema atual - é possível?
Solução
Você pode incorporar HTML no Markdown, para que você possa fazer algo assim:
<img style="float: right;" src="whatever.jpg">
Continue markdown text...
Outras dicas
Muitos processadores "extras" de marcação suportam atributos. Portanto, você pode incluir um nome de classe como So (php markdown extra):
{.callout}
ou, alternativamente (Maruku, Kramdown, Python Markdown):
{: .callout}
Então, é claro, você pode usar uma folha de estilo da maneira correta:
.callout {
float: right;
}
Se o seu suportar essa sintaxe, ele fornecerá o melhor dos dois mundos: nenhuma marcação incorporada e uma folha de estilo abstrata o suficiente para não precisar ser modificada pelo seu editor de conteúdo.
Eu encontrei uma boa solução em Markdown puro com um pouco CSS 3 Hack :-)
Siga a imagem Float de código CSS 3 à esquerda ou direita, quando o image alt termina com < ou >.
img[alt$=">"] {
float: right;
}
img[alt$="<"] {
float: left;
}
img[alt$="><"] {
display: block;
max-width: 100%;
height: auto;
margin: auto;
float: none!important;
}
A incorporação de CSS é ruim:
CSS em outro arquivo:
img[alt=Flowers] { float: right; }
Eu gosto de ser super preguiçoso usando tabelas para alinhar imagens com o tubo vertical (|) Sintaxe. Isso é suportado por alguns sabores de remarca (e também é apoiado por Têxtil Se isso flutuar no seu barco):
| I am text to the left |  |
ou
|  | 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 marcação e você não precisa se lembrar de nenhum CSS ou HTML bruto.
Eu tenho uma alternativa aos 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 de marcação:
Observe o hash de URL adicionado #Center.
Agora adicione esta regra no CSS usando seletores de atributos 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 uso indevido da tag alt, como algumas pessoas haviam comentado para essa solução. Também não exigirá extensões adicionais. Faça um para flutuar para a direita e esquerda, além de quaisquer outros estilos que desejar.
Mesmo mais limpo seria apenas colocar p#given img { float: right } na folha de estilo, ou no <head> e envolto style Tag. Então, basta usar o Markdown .
<div style="float:left;margin:0 10px 10px 0" markdown="1">
</div>
O atributo markdown Possibilidade dentro do Markdown.
eu gostei Resposta do Learnvst de usar as tabelas porque é bastante legível (que é um objetivo de escrever marcação).
No entanto, no caso do analisador de Markdown do Gitbook, eu precisava, além de uma linha de cabeçalho vazia, adicionar uma linha de separador sob ele, para que a tabela seja reconhecida e adequadamente renderizada:
| - | - |
|---|---|
| I am text to the left |  |
|  | I am text to the right |
Linhas de separador precisam incluir pelo menos três traços --- .
Se você o implementar em Python, existe uma extensão Isso permite adicionar pares de tecla/valor HTML e etiquetas de classe/ID. A sintaxe é para isso:
{: style="float:right"}
Ou, se o estilo incorporado não flutuar no seu barco,
{: .floatright}
com uma folha de estilo correspondente, stylish.css:
.floatright {
float: right;
/* etc. */
}
Como Greg disse Você pode incorporar o conteúdo HTML no Markdown, mas um dos pontos de Markdown é evitar ter que ter um amplo conhecimento de marcação CSS/HTML, certo? Isto é o que eu faço:
No meu arquivo de marcação, eu simplesmente instruo todos os meus editores do Wiki a incorporar todas as imagens com algo que se parece com o seguinte:
'<div> // Put image here </div>`
(Claro .. eles não sabem o que <div> significa, mas isso não deve importar)
Então, o arquivo de marcação se parece com o seguinte:
<div>
![optional image description][1]
</div>
[1]: /image/path
E no conteúdo CSS que envolve toda a página, posso fazer o que quiser com a tag de imagem:
img {
float: right;
}
Claro que você pode fazer mais com o conteúdo CSS ... (neste caso em particular, envolvendo o img tag with div evita que outro texto se envolva contra a imagem ... este é apenas um exemplo, no entanto), mas imho o ponto de Markdown é que você não quer pessoas potencialmente não técnicas que entram nos meandros do CSS/HTML. Cabe a você como desenvolvedor da Web fazer com que seu conteúdo CSS que envolva a página o mais genérico e limpo possível, mas depois Novamente, seus editores não precisam saber disso.
Eu tive a mesma tarefa e alinhei minhas imagens à direita, adicionando isso:
<div style="text-align: right"><img src="/default/image/sms.png" width="100" /></div>
Para alinhar sua imagem à esquerda ou centro, substitua
<div style="text-align: right">
com
<div style="text-align: center">
<div style="text-align: left">
O mais simples é embrulhar a imagem em uma etiqueta central, como assim ...
<center></center>
Qualquer coisa a ver com o Markdown pode ser testada aqui - http://daringfireball.net/projects/markdown/dingus
Claro, <center> Pode ser preterido, mas é simples e funciona!
