Skip to content
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

inline code blocks look nothing like multiline code blocks #52

Closed
skewty opened this issue Mar 30, 2020 · 4 comments
Closed

inline code blocks look nothing like multiline code blocks #52

skewty opened this issue Mar 30, 2020 · 4 comments
Labels
enhancement New feature or request

Comments

@skewty
Copy link

skewty commented Mar 30, 2020

The software development team I work on uses markdown to document our projects.
I really like your Ursine Umbra theme except for one detail.
The inline code blocks look nothing like multiline code blocks.
Code should stand out and look like code, whether it is inline or multiline in my opinion.

Suggested fix:

code {
  font-size: .9em;
  border: 1px solid #ffffff26;
  border-radius: .25rem;
  padding: 0.25rem .5rem;
  background-color: #282a36;
}

I additionally wanted this to give a bit more space between normal text and code blocks since the padding was increased but it isn't working. I tried Sh-F12 to use the Dev Tools to diagnose but
Typora kept locking up on me so I gave up.

code:not(:first-child) {
  margin-left: 0.25rem;
}
code:not(:last-child) {
    margin-right: 0.25rem;
}

Your thoughts?

@krokofant
Copy link
Contributor

krokofant commented Mar 30, 2020

Image for reference:
image
image

`console.log('Foo Bar');const x = 'y';` 

```javascript
console.log('Foo Bar');
const x = 'y';
```

Code should stand out and look like code, whether it is inline or multiline in my opinion.

Could you clarify what the code should look like? The spacing and the coloring? The code blocks can have a language tag on them like the above javascript one which seems to privide syntax highlighting.

@skewty
Copy link
Author

skewty commented Mar 30, 2020

The inline code has a different background and different padding that the multiline block.
That is what I don't like. I was hoping they looked more similar.

To make them look more similar, I made the inline code have the same background as the multiline and additionally added some padding to the inline.

@noatpad
Copy link
Owner

noatpad commented Mar 30, 2020

It actually can be a nice thing to implement, & it's also consistent to how Bear does its style for both kinds of code blocks, so I'll go ahead and implement it.

After a bit of tinkering, this is the result I got:
image
image

The only thing I can't apply is of course the syntax highlighting to the inline blocks (since that's handled by a different component specific to code fences). The extra margin can work, but I personally prefer it without margin space since there's already a bit of space given by the padding.

@noatpad noatpad added the enhancement New feature or request label Mar 30, 2020
@skewty
Copy link
Author

skewty commented Mar 31, 2020

Looks great to me! Thank you for the enhancement.

@skewty skewty closed this as completed Mar 31, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

3 participants