diff --git a/modules/primer-markdown/lib/code.scss b/modules/primer-markdown/lib/code.scss index f703f9236d..3cdd3f9bc4 100644 --- a/modules/primer-markdown/lib/code.scss +++ b/modules/primer-markdown/lib/code.scss @@ -3,19 +3,11 @@ // Inline code snippets code, tt { - padding: 0; - padding-top: 0.2em; - padding-bottom: 0.2em; + padding: 0.2em 0.4em; margin: 0; font-size: 85%; background-color: rgba($black, 0.05); - border-radius: 3px; // don't add padding, gives scrollbars - - &::before, - &::after { - letter-spacing: -0.2em; // this creates padding - content: "\00a0"; - } + border-radius: $border-radius; br { display: none; } } @@ -53,7 +45,7 @@ font-size: 85%; line-height: 1.45; background-color: $gray-100; - border-radius: 3px; + border-radius: $border-radius; } pre code, @@ -67,10 +59,5 @@ word-wrap: normal; background-color: transparent; border: 0; - - &::before, - &::after { - content: normal; - } } } diff --git a/modules/primer-markdown/stories.js b/modules/primer-markdown/stories.js new file mode 100644 index 0000000000..926c4a26ab --- /dev/null +++ b/modules/primer-markdown/stories.js @@ -0,0 +1,18 @@ +import React from 'react' +import { storiesOf } from '@storybook/react' + +storiesOf('Markdown', module) + .add('code', () => ( +
+ This is inline code block. This code block has a <br>.
in itWhen a code block has a long sentence in it, it should wrap the page to a new line. Some people like to see the world burn and put reallylongunbrokenstringsreallylongunbrokenstringsreallylongunbrokenstringsreallylongunbrokenstringsreallylongunbrokenstrings in the code blocks.
+
+ Really long pre blocks should scroll horizontally when the words are longer than the parent container
+
+