-
-
Notifications
You must be signed in to change notification settings - Fork 480
Closed
Description
You can easily style the elements of the UI using CSS in the Markdown editor.
Here's how to replicate:
Open the Markdown Activity.
And paste the following code into the box.
Move your mouse pointer and enjoy:)
Here's the code:
<style>
*::after{content: 'LOL please fix the bug';background-color: red; animation: animate 1s infinite}
*{transition: all 1s;
background-color: yellow!important;
}
*:hover{transform:scale(1.01)translatex(20px); background-color: red!important;}
button:hover, p:hover{animation: animate-again 2s infinite;}
@keyframes animate{
25%{background-color: red}
50%{background-color: green}
75%{background-color: blue}
}
@keyframes animate-again{
25%{background-color: blue; color: red}
50%{background-color: green; color: blue}
75%{background-color: red; color: green}
}
</style>
<p>Hello World, This is a paragraph and <button style="background: black!important;" onclick="alert('Stop clicking me!')">This is a button </button></p>
If you click on that black (colour changing when you hover) button, you'll notice that it even accepts JavaScript code and the code works perfectly.
I can see two possible fixes:
The dumb fix:
Use JavaScript to remove all occurences of the <style> tag and the style attribute.
The smart fix:
Instead of compiling everything live, put a "Run" button that generates a page on demand and then in the preview, include an <iframe> with source set to that page.