-
-
Notifications
You must be signed in to change notification settings - Fork 37.9k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Recommend using semantic markup for code #35913
Comments
I made the following changes to .challenge-instructions {
font-size: 16px;
}
.challenge-instructions blockquote, .challenge-instructions pre {
background-color: #eee;
color: #c7254e;
padding: 10px;
width: 100%;
margin: 0;
margin-bottom: 1.45rem;
font-family: monospace;
font-size: 16px;
}
.challenge-instructions pre {
border: 0;
border-radius: 0%;
} This allows the current way we are writing the For example, with the above CSS change, both of the following render exactly the same. <blockquote>
{<br>
Alan: {<br>
online: false<br>
},<br>
Jeff: {<br>
online: true<br>
},<br>
Sarah: {<br>
online: false<br>
}<br>
}</blockquote>
<pre><code>{
Alan: {
online: false
},
Jeff: {
online: true
},
Sarah: {
online: false
}
}</code></pre> If the <pre><code>
{
Alan: {
online: false
},
Jeff: {
online: true
},
Sarah: {
online: false
}
}
</code></pre>
I really like the idea of being able to use the |
@ojeytonwilliams Just tested your use of the 3 backticks and works just like the
How do we "sign in" when using |
@RandellDawson It's been a while since I created my local account, but I believe you use I like the idea of a smooth transition from blockquotes. Ideally we'd add the language labels as we go (but keep your style). That way, if we do decided to highlight the code later on, it should be a fairly painless change. |
In the description and instruction sections of the challenges, the style guide recommends
<blockquote>
to markup blocks of code, and<code>
for inline code.I think it would be better to be consistent and use semantic markup for both.
We could either do this by through
<pre><code>
tags or take advantage of the fact we're using markdown and use code fences, i.e. ```js ```. This would have the benefit that we could use prismjs to make the code highlighting in the challenge descriptions the same as in the guide.The text was updated successfully, but these errors were encountered: