ImageMagick / Usage-Markdown

Base text document processed with pandoc
12 stars 13 forks source link

[Feature request] Add a reasonable style for "definition list" to `magick.css` #6

Open KurtPfeifle opened 9 years ago

KurtPfeifle commented 9 years ago

When converting a current Markdown file to HTML (for temporary preview and checking) with this command:

pandoc  \
  -t html \
  -f markdown \
  -o index.html \
  -c http://imagemagick.org/css/bootstrap.min.css \
  -c http://imagemagick.org/css/magick.css \
   index.md

the resulting HTML does display definition lists (<dl> ... </dl>) not in a nice way. (Converting without any CSS the results for definition lists look better.)

It would be nice if we could have a (maybe local only) patch for magick.css which fixes this.

Example of Markdown with a definition list: morphology/index.md (after my next git-push), search for Smooth:i.s.

MarkSetchell commented 9 years ago

Being somewhat proficient in “vi”, I tend to use that rather than Textmate, so I have the following in my bash profile, and I can just type:

preview

in the Terminal to preview “index.md” in Safari, or

preview someFile.md

if I want a different one. Also, as it creates the HTML file in “/tmp”, it doesn’t pollute the git area of my filesystem with untracked files.

Works for me anyway!

Mark

Preview IM edits with pandoc

function preview { input=${1:-'index.md'} html="/tmp/preview.html" pandoc -s --to html5 --from markdown --output "$html" --css http://imagemagick.org/css/bootstrap.min.css --css http://imagemagick.org/css/magick.css "$input" open "$html" }

On 18 Jul 2015, at 00:19, Kurt Pfeifle notifications@github.com wrote:

When converting a current Markdown file to HTML (for temporary preview and checking) with this command:

pandoc \ -t html \ -f markdown \ -o index.html \ -c http://imagemagick.org/css/bootstrap.min.css \ -c http://imagemagick.org/css/magick.css \ index.md

the resulting HTML does display definition lists (

...
) not in a nice way. (Converting without any CSS the results for definition lists look better.)

It would be nice if we could have a (maybe local only) patch for magick.css which fixes this.

Example of Markdown with a definition list: morphology/index.md (after my next git-push), search for Smooth:i.s.

— Reply to this email directly or view it on GitHub.

KurtPfeifle commented 9 years ago

Thanks, Mark, for sharing this idea.

Usually I'm also more comfortable with VIm (and I have a similar function built into my .bashrc) -- however, after a long editing session with the same file I sometimes find it refreshing to do final proof reading with a different user interface. This frequently lets me see typos which I somehow had overlooked before, despite of several times of reading over them...

emcconville commented 9 years ago

Perhaps a left-padding that would match the same vertical line as block quotes for the dd elements.

dl dt { font-style: bold; margin-top: auto; }
dl dt code { border-radius: 3px; }
dl dt + dd { padding-left: 25px; }

preview

screen shot 2015-08-12 at 3 34 31 pm