Three.js: Docs: Use <code> tags for actual code

[Mamboleoo]

I was wondering if it would be possible to use some inline <code> in the documentation for actual code.
For example here we are using a <strong> tag.

Also, I noticed that even on the new docs (in the dev branch) the strong tags are rendered without bold. Is there a reason for that?

Thanks!

[looeee]

the strong tags are rendered without bold. Is there a reason for that?

The text inside the <strong> tags in your screenshot is bold. Perhaps we should make it bolder if it's not clear to everyone though.

I agree we should use semantically correct tags for code elements. On the other hand, it's a lot of work to change this throughout the docs and not something that seems like a high priority, to me at least.

[Mamboleoo]

In the new docs, the strong elements are displayed in full black but not in bold and I don't feel it is very clear.

It would be indeed a lot of work to switch all previously strong code into proper code tags. But I'm currently translating the docs in French and it would be nice if I could already use inline code.
Implementing an inline style could be as simple as

code.inline {
    display: inline-block;
    margin: 0;
    padding: 2px 5px;
    vertical-align: middle;
}

Which would render this:

[looeee]

the strong elements are displayed in full black but not in bold

Ah, yes in that case I think we should increase the font weight.

[Mugen87]

/cc @yuinchien

[yuinchien]

The solid black text looks harsh. For strong & code.inline I recommend:

strong {
  font-weight: bold; 
  color: #444; // same color as body text
}
code.inline {
  font-family: 'Roboto Mono';
  font-size: 14px;
  background: #eee;
  border-radius: 4px;
  padding: 2px 5px;
}

Will look like this:

[yuinchien]

I pushed new styles for <strong> in #16456.

[Mamboleoo]

Thanks!
Do you want me to create a PR for the inline code?

[yuinchien]

Feel free!

[Mamboleoo]

PR made: https://github.com/mrdoob/three.js/pull/16530

Now I have a question about, what should and what should not be treated as inline code?

Here is my ideas:

• A word in the middle of a sentence being explained should be strong (_MeshBasicMaterial_)
• A piece a code from a demo above/below should be inline code (_scene.add()_)

<p>In addition to the geometry, we need a material to color it. Three.js comes with several materials, but we'll stick to the <strong>MeshBasicMaterial</strong> for now. All materials take an object of properties which will be applied to them. To keep things very simple, we only supply a color attribute of <code class="inline">0x00ff00</code>, which is green. This works the same way that colors work in CSS or Photoshop (<strong>hex colors</strong>).</p>

<p>The third thing we need is a <strong>Mesh</strong>. A mesh is an object that takes a geometry, and applies a material to it, which we then can insert to our scene, and move freely around.</p>

<p>By default, when we call <code class="inline">scene.add()</code>, the thing we add will be added to the coordinates <strong>(0,0,0)</strong>. This would cause both the camera and the cube to be inside each other. To avoid this, we simply move the camera out a bit.</p>

[looeee]

A word in the middle of a sentence being explained should be strong (MeshBasicMaterial)

I agree with this, but the order of precedence should be code > bold. So in the case where we're explaining MeshBasicMaterial, it will always be code, not bold. Introducing a new term such as field of view should be bold though.