- \n
- We want everything to look good out of the box.<\/li>\n
- Really just the first reason, that\u2019s the whole point of the plugin.<\/li>\n
- Here\u2019s a third pretend reason though a list with three items looks more realistic than a list with two items.<\/li>\n<\/ol>\n
Typography should be easy<\/h3>\n
So that\u2019s a header for you \u2014 with any luck if we\u2019ve done our job correctly that will look pretty reasonable.<\/p>\n
Something a wise person once told me about typography is:<\/p>\n
\n
Typography is pretty important if you don\u2019t want your stuff to look like trash. Make it good then it won\u2019t be bad.<\/p>\n<\/blockquote>\n
It\u2019s probably important that images look okay here by default as well:<\/p>\n
What to expect from here on out<\/h2>\n
What follows from here is just a bunch of absolute nonsense I\u2019ve written to dogfood the plugin itself. It includes every sensible typographic element I could think of, like bold text<\/strong>, unordered lists, ordered lists, code blocks, block quotes, and even italics<\/em>.<\/p>\n
It\u2019s important to cover all of these use cases for a few reasons:<\/p>\n
- \n
- We want everything to look good out of the box.<\/li>\n
- Really just the first reason, that\u2019s the whole point of the plugin.<\/li>\n
- Here\u2019s a third pretend reason though a list with three items looks more realistic than a list with two items.<\/li>\n<\/ol>\n
Now we\u2019re going to try out another header style.<\/p>\n
![\"\"](\"https:\/\/ncmaz.chisnghiax.com\/wp-content\/uploads\/2021\/09\/photo-1501493870936-9c2e41625521-1.jpg\")
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iure vel officiis ipsum placeat itaque neque dolorem modi perspiciatis dolor distinctio veritatis sapiente<\/figcaption><\/figure>\n Now I\u2019m going to show you an example of an unordered list to make sure that looks good, too:<\/p>\n
- \n
- So here is the first item in this list.<\/li>\n
- In this example we\u2019re keeping the items short.<\/li>\n
- Later, we\u2019ll use longer, more complex list items.<\/li>\n<\/ul>\n
And that\u2019s the end of this section.<\/p>\n
Code should look okay by default.<\/h2>\n
I think most people are going to use highlight.js<\/a> or Prism<\/a> or something if they want to style their code blocks but it wouldn\u2019t hurt to make them look okay<\/em> out of the box, even with no syntax highlighting.<\/p>\n
What I\u2019ve written here is probably long enough, but adding this final sentence can\u2019t hurt.<\/p>\n
function tick() {\n const element = (\n <div>\n <h1>Hello, world!<\/h1>\n <h2>It is {new Date().toLocaleTimeString()}.<\/h2>\n <\/div>\n );\n ReactDOM.render(element, document.getElementById('root'));\n} <\/code><\/pre>\nHopefully that looks good enough to you.<\/p>\n
There are other elements we need to style<\/h2>\n
![\"\"](\"https:\/\/ncmaz.chisnghiax.com\/wp-content\/uploads\/2021\/09\/qtbv_8p_ksk-837x1024-1.jpg\")
<\/figure>\n