![]() Some people like to hide the button and only show it when you hover over the code block. You can place the button somewhere else, and style it differently if you prefer. ![]() To achieve this placement, we set the pre as position: relative and the button as position: absolute, and set the top and right properties of the button.Īlso, we want to add enough top padding to the pre to make space for the button, so that the text will never be covered by the button. We want to position the button in the top right corner of the pre. ![]() Here is the codepen of what I will cover below. This will make it easier for you to target the correct elements in your CSS later. Prism copies the language-xxxx class from the code element to the pre for you. Prism looks for code elements that have language-xxxx classes to identify blocks to add highlighting to. Prism is quite popular and is used in the static site generator Eleventy, but there are many libaries that do the same thing.Īccording to the HTML5 spec, the recommended way to define the language for a code block is a through a language-xxxx class i.e. In this example, I will use the syntax highlighting library Prism on the client-side. Enter fullscreen mode Exit fullscreen mode
0 Comments
Leave a Reply. |