axelson
Recently, I wanted an easy way to highlight elixir code, and I wanted to use @tmbb’s excellent Makeup library to do so, but it was annoying to get some nice visual output so I decided to create a Phoenix LiveView-powered website to help others with the same issue. Simply paste in your elixir code into the text box and it will immediately be highlighted:
Try it out here: https://makeup-live-format.herokuapp.com/
Where Next?
Trending in Discussions
Other Trending Topics
Latest Phoenix Threads
Latest on Elixir Forum
Sponsor Spotlight
Producing high quality Elixir screencasts since 2017.
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #library
- #deployment
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #elixirconf
- #channels
- #exunit
- #discussion
- #code-sync
- #podcasts
- #javascript
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #elixirconf-us
- #ai
- #blog-post
- #elixir-ls
- #phoenix_html
- #iex
- #graphql
- #genstage
- #websockets
- #supervisor
- #advent-of-code
- #distillery
- #processes
- #api
- #forms
- #hex
- #security
- #metaprogramming
Our Sponsors
Build Elixir applications with speed and confidence.
We build reliable cloud platforms for business-critical systems.
Catch errors, track performance, monitor hosts and more.
Error tracking, logs, uptime, and Just Enough APM. Built for developers.
Elixir, Erlang & BEAM conferences from Code Sync - join us in 2026!
Master modern tools, write cleaner code, and tackle real-world challenges.
Producing high quality Elixir screencasts since 2017.
**Building the future of software with AI, trust, and human connection.**
The team behind Membrane, Popcorn, LiveDebugger. Available for hire.
Courses that'll move you from confusion to "Aha, now I get it!"
Showing Posts 18 to 9- Show Best Posts
- Show All (oldest first)
- Show All (newest first)
axelson
Hi @alvises, thanks for the kind words! De-bouncing is a good idea so I’ve added it in Add debounce on input by axelson · Pull Request #10 · axelson/makeup_live_format · GitHub
Also if anyone is curious what a PR that updates a LiveView project from 0.4.1 to 0.11.1 they can look at: Update phoenix live view by axelson · Pull Request #8 · axelson/makeup_live_format · GitHub along with Handle removal of live_view.css by axelson · Pull Request #9 · axelson/makeup_live_format · GitHub (since I missed a breaking change the first time)
As a side-note I wish there was a way to for
phx-throttleto work similarly to lodash’s throttle withleading=trueandtrailing=true: Lodash Documentation but that should really be a separate forum topic.alvises
Thanks @axelson, really nice project! I love how easy it is to generate the beautiful Makeup output in realtime with LiveView!
One thing, at the moment for each single change the whole textarea value is sent to the back-end and the whole highlighted code sent back to the front-end. Maybe adding some debouncing would help?
axelson
FYI, I merged the PR’s (including the
\r\npatch). Thanks @Eiji!axelson
I’m glad that you like it! Not sure I’ll get to a “looks wrong” button/form but that is interesting. Perhaps instead of an email it could just create a DB record.
Thanks for the PR’s and the investigation, I’ll take a look at them soon!
josevalim
FWIW, the same change would be necessary in Erlang’s Makeup parser.
josevalim
To be clear, it is
\r\n(as emitted by Windows) and Elixir’s parser does handle it.\n\rwould not be handled.tmbb
It’s not “maybe”. I’ve just checked and the lexer doesn’t handle this case properly (if Elixir is meant to support these line endings).
Eiji
My browser is somehow sending
\r\ninstead of\n\r. Maybe only my case is not handled properly bylexer?My PR is just a temporary fix and would fix bug (by workaround) much faster + it could be reverted any time.
tmbb
Even though you’re using linux, it seems like your browser is sending windows-style strings through the websocket… Is that some kind of web standard in which JS treats all strings as being windows-style? I have to look into it
I’m not sure such a fix would be a good idea. I think the Elixir lexer should be handing this input correctly, that is, it should recognize the
\n\rsequence as whitespace. Unless there is something in the Elixir “standard” that says that the compiler is not meant to accept strings with windows-style endings… Is there?tmbb
@axelson I just wanted to say that I wholeheartedly approve of this demo xD I’ve meant to write something like it for a while, but I never made the time for it.
I wonder if there could be a way for the user to tag code as “looking wrong”, which would cause an email to be sent somewhere (or maybe a bot that creates a GitHub issue in the lexer’s repo?) I can see this being abused though… Maybe if it were protected by a captcha?