-
Notifications
You must be signed in to change notification settings - Fork 5
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
Improve markdown snippets #388
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Code block looks so much better !
Thanks for hearing me out 🙏
C'est beau ! |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Quelques détails sur le CSS (juste la syntaxe, je challenge pas le style en lui-même), mais rien de bloquant.
Très cool de voir la feature un peu plus robuste 💯
@@ -29,7 +29,21 @@ | |||
} | |||
|
|||
.code-highlight pre { | |||
@apply px-1 border border-aoc-gray-darker rounded; | |||
@apply px-6 py-4 border border-aoc-gray-darker rounded; | |||
@apply bg-dark !important; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Il est nécessaire ce !important
?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Pour l'instant oui. On a du style appliqué directement sur l'élément par Commonmarker, c'est la seule façon de l'override.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Je l'ai constaté en faisant une passe, bien vu !
@apply px-6 py-4 border border-aoc-gray-darker rounded; | ||
@apply bg-dark !important; | ||
|
||
position: relative; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Tu peux utiliser @apply relative
avec Tailwind 👍
text-transform: capitalize; | ||
|
||
position: absolute; | ||
top: -1px; | ||
right: -1px; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@apply absolute -top-px -right-px capitalize
top: -1px; | ||
right: -1px; | ||
|
||
@apply px-2 border border-aoc-gray-darker text-aoc-gray font-medium text-sm rounded-tr; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
On n'a pas de font-medium
sur le projet, seulement font-light
et font-semibold
. Techniquement si tu utilises autre chose ça fallback au plus proche, mais c'est pas "correct".
Summary of changes and context
Follow-up de #342. Inclut:
~~~
(qui sont autorisés par la spec)ruby
après les backticks, on colore quand même basé sur le language du snippet)Sanity checks