noatpad / typora-theme-ursine

A Typora theme, inspired by Bear
MIT License
715 stars 86 forks source link

inline code blocks look nothing like multiline code blocks #52

Closed skewty closed 4 years ago

skewty commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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.

skewty commented 4 years ago

Looks great to me! Thank you for the enhancement.