Comments (6)
@dderooy global.css.js
is basically just a CSS reset. Feel free to just edit the file, for example add this to the end of the stylesheet:
ul {
list-style: square;
}
That stylesheet is definitely meant to be overwritten by you 🙂
If you don't want to touch that file, you can also add some rules for that in component stylesheets, for example box.css.js
:
export const Container = styled.div`
padding: 2rem 4rem;
max-width: 700px;
ul {
list-style: square;
}
`;
Then only the lists inside <Box/>
components are being styled!
@gswirrl You can use the HTML by querying for it in the page query and referencing it in the template. I'm not actually using converted markdown on the homepage. For example:
src/pages/about.js
<div
dangerouslySetInnerHTML={{
__html: data.aboutJson.content.childMarkdownRemark.html, // <- HTML
}}
/>
This uses markdown converted to HTML.
src/pages/index.js
<Title as="h2" size="large">
{data.homeJson.content.childMarkdownRemark.rawMarkdownBody} // <- Raw Markdown, not converted to HTML
</Title>
This is just using raw markdown. You can get the HTML by getting the .html
value instead of the .rawMarkdownBody
value.
from gatsby-universal.
Im having a similar issue, but (in my case) the markdown isn't being overridden, it's not being transformed.
Steps to reproduce:
gatsby new my-site https://github.com/fabe/gatsby-universal
- in (eg) ~/content/home/intro.md add
# Broken :-(
[link](https://www.google.com)
- Expected:
<h1>Broken :-(</h1>
<a href="https://www.google.com">link</a>
EDIT: poorly chosen example because this is actually inside an h2 tag, but the same problem, occurs everywhere
UPDATE: My mistake - this is expected! Sorry. To get rendered markdown. change the template to
{data.homeJson.content.childMarkdownRemark.html}
from gatsby-universal.
@fabe thanks so much for the full reply - id just figured it out and was editing my comment! :-) d'oh!
once again, thank you - love the starter!
from gatsby-universal.
@fabe Thank you for the help. I have it displaying properly now 😄 👍
from gatsby-universal.
@gswirrl @dderooy Thanks, let me know if anything else comes up! 🙂
from gatsby-universal.
I have the same issues. I've already used HTML to display my markdown file. For example like this :
<div dangerouslySetInnerHTML={{ __html: html }} />
I still can't display the markdown file properly, here is the case. I want to display ## Heading 2, but it just shows Heading 2, which is just plain text.
Besides, I also use Chakra UI.
Can anyone give me the solution, please?
from gatsby-universal.
Related Issues (20)
- Upgrade to Gatsby 5?
- An in-range update of gatsby is breaking the build 🚨 HOT 9
- An in-range update of gatsby is breaking the build 🚨 HOT 3
- An in-range update of gatsby is breaking the build 🚨
- Add config for directory-named-webpack-plugin to ignore node_modules
- An in-range update of gatsby is breaking the build 🚨 HOT 12
- An in-range update of gatsby is breaking the build 🚨
- totally newbie question HOT 2
- An in-range update of gatsby is breaking the build 🚨
- An in-range update of gatsby is breaking the build 🚨
- An in-range update of gatsby is breaking the build 🚨
- An in-range update of gatsby is breaking the build 🚨
- An in-range update of gatsby is breaking the build 🚨 HOT 11
- Update to react 16.8? HOT 8
- Interaction observer does not work correctly when added to multiple pages
- Remove pathPrefix from site-config.js
- Programmatically create pages from data fails
- Build Script Fails on Zeit Now HOT 2
- Cannot use a page template for multiple Markdown files HOT 1
- Error on NPM/Yarn Install HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from gatsby-universal.