Live HTML and CSS Editor

Learn
1

Hello,

I wrote an live editor for HTML. My app has an input field for the html code and a text field that shows the rendered output. For rendering the code input, I used this package: https://package.elm-lang.org/packages/hecrj/html-parser/. Is there a way to also parse CSS code an change the output accordingly.

Thank you

2

I don’t think there’s a parser for CSS in Elm yet, but you can just put the CSS string in a style tag in your view function to “run” it: Html.node "style" [] [Html.text myCssString]

1 Like
3

Thank you very much. That helped me a lot.

I have some other difficulties with the project. I wanted to have two modes one for only editing HTML and another for HTML and CSS.
You can see the HTML Mode here:

https://theghostoftomjoad.github.io/

https://github.com/TheGhostOfTomJoad/TheGhostOfTomJoad.github.io

I used codemirror for the editor like in this repo: https://github.com/tommyengstrom/codemirror-elm and ELM-UI.

Codemirror only showed one line if I did not specify a height in CSS. So I wrote a function for adjusting the height:

heightToCodemirrorcss height=
   String.concat[ ".CodeMirror { height: ",  String.fromInt height ,"px ;}"]

I tired a few values and found the right ones for my browser and my monitor, so
that that editor and the box for the result have the same height and the user doesn’t need to scroll. On every other element I used fill or shrink.

My Problem is that it doesn’t look good in other Browsers or on another Monitor.

Whats the right way to use no hard-coding and make it look good on every device.

4

I solved it, using this post:
https://discourse.elm-lang.org/t/using-task-in-init/6119/2

5

Have you considered using a Web Component to render the HTML and CSS? That might be a simpler and more robust way to do that that avoids having to manually do HTML or CSS parsing.

6

I’ve used juicy-ace-editor for this in the past.

7

Do you think of using an iframe and changing the scrdoc attribute?
I will try that out.

I’m already using an webcomponent for the editor.

8

I tried to simplify it with this solution:

renderCode : { a | htmleditorValue : String } -> Html msg
renderCode m  = iframe [srcdoc m.htmleditorValue, style "border" "none", css [Css.height (Css.vh 90.5),Css.width (Css.pct 100)]] []

Unfortunately height 100% does not work. Is there a better and simpler solution for the heigth?

9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.