snf.wsring.net

Search

Items tagged with: markdown

Any Markdown / Pandoc mavens know how to tweak the HTML DOM generated for HTML pages?

I'm looking at one for an article which doesn't seem to generate

<

article> or elements, though if it did either, would make some layout / CSS issues a lot easier to deal with.

Problem now is that when I set additional margins within <blockquote> segements, they don't really or consistently differ from the adjacent <br> elements. I have a sad.

The CSS I'm using, in part (and yes, I can share the full stylesheet, though this seems to be the operative code):
body { 
  margin: 1rem auto; 
  max-width: 90rem; 
  padding: 0 4rem 0.5rem; 
  width: auto; 
  font-size: 1rem; 
  line-height: 1.4; 
} 

blockquote { 
    margin-left: 8em; 
    margin-right: 6em; 
} 

article, p, ol, ul, li, div { 
    width: auto; 
    max-width: 45rem; 
    margin: 0 auto; 
    line-height: 1.4; 
} 

p { 
    margin: 1em auto; 
}

What happens is that the blockquote margins are acting against the full page width, and push the blockquote block back and forth across the full page, rather than constraining it within the region bounded by the <br> blocks. Given that the blockquotes aren't within the <br> blocks, that makes sense, but it's not the effect I want.

I'd also like to preserve the option to be able to set elements (images, sidenotes, callouts) within the left or right margins.

I'm thinking that changing the DOM to include an article element would make that easier, as I could set the width of the article or main elements.

Present DOM:

* html
* head
* body
* header
* nav
* p
* blockquote
* p
* body /
* html /

That would better be:

* html
* head
* body
* header
* nav
* article
* p
* blockquote
* p
* article /
* body /
* html /

("element /" is being used for closing tags)

Looking at HTML5 semantic elements:

* \<section>
* \<nav>
* \<article>
* \<aside>
* \<hgroup>
* \<header>
* \<footer>
* \<time>
* \<mark>

... "article" is what I'm looking for.o

Though ... Dive in to HTML5 doesn't use these: <view-source:http://diveinto.html5doctor.com/past.html>

But yeah: if I could shim an <article> tag in there, I think I'd be happier.

And yes, I can (and probably will) CodePen this in a bit.

#pandoc #markdown #html #css
 

Markdown Quick Reference


There are some fun things you can do with Markdown formatting.

Feature Markdown Example
italic _italic_ italic
bold **bold** bold
strikethrough ~~strikethrough~~ ~~strikethrough~~
superscript ^superscript^ ^superscript^
subscript ~subscript~ ~subscript~
links [Description](https://example.com/) Description
bare links <https://www.example.com> https://www.example.com
code `Y29kZQ==` Y29kZQ==
escape \*escape\* *escape*
There are also:

Unordered lists:

* Foo
* Bar
* Baz
* Quz
* Foo 
* Bar 
  \* Baz 
    \* Quz

Ordered lists:
  • Foo
  • Bar
    • Baz
      • Quz
1. Foo 
1. Bar 
   1. Baz 
      1. Quz

Headers:

Header 1

Header 2

Header 3

Header 4

Header 5
Header 6
# Header 1 
## Header 2 
### Header 3 
#### Header 4 
##### Header 5 
###### Header 6

Headers also:

Header 1

Header 2

Header 1 
========== 

Header 2 
---------

Blockquote:
This is a blockquoted text passage.
You can nest your blockquotes.

Or unnest them again.
> This is a blockquoted text passage. 
>> You can nest your blockquotes. 
> 
> Or unnest them again.

To product a code block, as above:
``` 
> This is a blockquoted text passage. 
>> You can nest your blockquotes. 
> 
> Or unnest them again. 
```

Or indent four spaces:

Normal text
Code block
Normal text 

    Code block

Horizontal rule:
----

Image

Bild/Foto
![Dummy text]([url=https://joindiaspora.s3.amazonaws.com/uploads/images/thumb_small_3059c10576ae28ec722a.jpg]https://joindiaspora.s3.amazonaws.com/uploads/images/thumb_small_3059c10576ae28ec722a.jpg[/url])

Tables:
|Feature|Markdown|Example| 
|:- |:- |:- | 
|italic| `_italic_`| _italic_ | 
|bold| `**bold**` | **bold** | 
|strikethrough| `~~strikethrough~~` | ~~strikethrough~~ | 
|superscript| `^superscript^`| ^superscript^ | 
|links| `[Description]([url=https://example.com/]https://example.com/[/url])`|[Description]([url=https://example.com/]https://example.com/[/url])| 
|code|\``code`\`|`code`| 
|escape|`\*escape\*`|\*escape\*|

#markdown #quickGuide #tips #googleplus #newhere #formatting

Source: https://pastebin.com/raw/HiVi5cYS
 

For the Newbies: Markdown Quick Reference


My most popular Diaspora post to date has been my Markdown Quick Reference, which shows both the raw and formatted text for various Markdown features.

New arrivals from #GooglePlus and elsewhere may appreciate this.

(Posted as a link as I cannot reshare my own posts.)

#Markdown #Tips

https://joindiaspora.com/posts/54c680b0b40801366b870218b798024d
 

wiki.js

#wiki #wikijs #nodejs #markdown
 

pandoc

Build html, pdf (via latex) and epub files from md files
ct.2018.07 S.168

https://pandoc.org/index.html

atom markdown preview: https://github.com/atom/markdown-preview

#pandoc #markdown #md #html #epub #pdf #atom #ct201807 #ct
 
Later posts Earlier posts