flems: Converting blocks to Flems
I want to convert <code> blocks to Flems. Tried the following which works but the Flems are squashed vertically so only the first line of code shows. Should the autoHeight affect this?
<html>
<body>
<h2>Test</h2>
<code>
const helloWorld = {
view: () => m('h1', 'Hello World')
}
m.mount(document.body, helloWorld);
</code>
<code>
let youSaid = '123'
const helloWorld = {
view: () => m('div', [
m('h1', 'Hello World'),
m('input', {
value: youSaid,
oninput: e => youSaid = e.target.value
}),
' You said: ' + youSaid
])
}
m.mount(document.body, helloWorld);
</code>
<script src="https://flems.io/flems.html" type="text/javascript" charset="utf-8"></script>
<script>
function Example(el, code, css) {
Flems(el, {
files: [
{
name: '.js',
content: code
},
{
name: '.css',
content: css || ''
}
],
links: [
{
name: 'mithril',
type: 'script',
url: 'https://unpkg.com/mithril'
},
{
name: 'mithril-stream',
type: 'script',
url: 'https://unpkg.com/mithril-stream'
},
{
name: 'purecss',
type: 'css',
url: 'https://unpkg.com/purecss'
}
],
middle : 55,
selected : '.js',
color : 'rgb(38,50,56)',
theme : 'material',
resizeable : true,
editable : true,
toolbar : true,
fileTabs : true,
linkTabs : true,
shareButton : true,
reloadButton : true,
console : true,
autoReload : true,
autoHeight : true,
})
}
examples = document.getElementsByTagName('code');
for (var i = 0; i < examples.length; ++i) {
var ex = examples[i];
var html = ex.textContent;
Example(ex, html);
}
</script>
</body>
</html>
Also, what does resizeable do?
About this issue
- Original URL
- State: closed
- Created 6 years ago
- Comments: 16 (10 by maintainers)
Nono, I was already fixing other small issues in the same area, so it’s perfect to look at now 😉
Yeah the thinking was exactly for a case like this where replacing code blocks with actual working code would keep the layout as expected… I’ll try to see why it’s not behaving correctly now…
Yes, sorry, it should be false. My bad. Hope that solved your problem.