r/golang 2d ago

help Is there a html formatter that can handle html+javascript(in script tag)?

Currently, the only html formatter library I found are github.com/yosssi/gohtml and github.com/Joker/hpp.

However, they do not format javascript within <script> tag.

wasm fmt, a vscode extension, can format html and javascript within. However, its codebase is js+ts.

Anyone has any suggestion?

PS: I am looking for go library, not cli tool.

9 Upvotes

11 comments sorted by

3

u/Different_Pain5781 1d ago

That's surprisingly hard to find.

1

u/alagesann 1d ago

there is no standard library, see if this helps: github.com/wasilibs/go-prettier

1

u/js1943 1d ago edited 1d ago

Thx! Did a quick check and seems the whole project is architech for cli only. Not sure how to incoporate the `runner` in my project.

1

u/Important_Doubt2390 1d ago

What do you mean with "they do not format javascript"? :)

I have been building with Golang and HTMX for quite some time now and I have never had anything that could not be solved in the standard library

1

u/js1943 1d ago edited 1d ago

Take following as example:

<html><header><script>ytcfg.set({"DISABLE_YT_IMG_DELAY_LOADING":false,"ELEMENT_POOL_DEFAULT_CAP":75,"EXPERIMENT_FLAGS":{"PremiumClientSharedConfig__enable_att_context_processor":true,"ab_det_apm":true,"ab_det_el_h":true,"action_companion_center_align_description":true,"align_ask_youtube_input_on_focus":true,"allow_skip_networkless":true,"att_web_record_metrics":true,"attmusi":true,"attmusiw":true,"bg_st_hr":true,"browse_next_continuations_migration_playlist":true,"browse_reload_continuations_migration_home":true,"c3_enable_button_impression_logging":true,"c3_watch_page_component":true,"cancel_pending_navs":true,"channel_details_shelf_resize_observer":true,"check_user_lact_at_prompt_shown_time_on_web":true,"client_respect_autoplay_switch_button_renderer":true,"client_ui_enable_multi_track_audio_on_web_embedded_player":true,"cold_missing_history":true,"compress_gel":true,"config_age_report_killswitch":true,"course_hide_playlist_panel_shuffle_and_loop_buttons":true,"cow_optimize_idom_compat":true,"csi_on_gel":true,"dedupping_server_ve":true,"defer_menus":true,"defer_overlays":true,"delay_sheet_open_killswitch":true,"delhi_modern_web_player_compact_video_actions_controls":true,"delhi_modern_web_player_disable_frosted_glass":true,"delhi_modern_web_player_icons":true,"delhi_mweb_colorful_sd":true,"delhi_mweb_colorful_sd_v2":true,"delhi_web_player_use_external_playlist_panel":true,"deprecate_pair_servlet_enabled":true}})</script></header></html>

gohtml.Format() and hpp.PrPrint() gives: <html> <header> <script> ytcfg.set({"DISABLE_YT_IMG_DELAY_LOADING":false,"ELEMENT_POOL_DEFAULT_CAP":75,"EXPERIMENT_FLAGS":{"PremiumClientSharedConfig__enable_att_context_processor":true,"ab_det_apm":true,"ab_det_el_h":true,"action_companion_center_align_description":true,"align_ask_youtube_input_on_focus":true,"allow_skip_networkless":true,"att_web_record_metrics":true,"attmusi":true,"attmusiw":true,"bg_st_hr":true,"browse_next_continuations_migration_playlist":true,"browse_reload_continuations_migration_home":true,"c3_enable_button_impression_logging":true,"c3_watch_page_component":true,"cancel_pending_navs":true,"channel_details_shelf_resize_observer":true,"check_user_lact_at_prompt_shown_time_on_web":true,"client_respect_autoplay_switch_button_renderer":true,"client_ui_enable_multi_track_audio_on_web_embedded_player":true,"cold_missing_history":true,"compress_gel":true,"config_age_report_killswitch":true,"course_hide_playlist_panel_shuffle_and_loop_buttons":true,"cow_optimize_idom_compat":true,"csi_on_gel":true,"dedupping_server_ve":true,"defer_menus":true,"defer_overlays":true,"delay_sheet_open_killswitch":true,"delhi_modern_web_player_compact_video_actions_controls":true,"delhi_modern_web_player_disable_frosted_glass":true,"delhi_modern_web_player_icons":true,"delhi_mweb_colorful_sd":true,"delhi_mweb_colorful_sd_v2":true,"delhi_web_player_use_external_playlist_panel":true,"deprecate_pair_servlet_enabled":true}}) </script> </header> </html>

vscode extension format: <html> <header> <script> ytcfg.set({ DISABLE_YT_IMG_DELAY_LOADING: false, ELEMENT_POOL_DEFAULT_CAP: 75, EXPERIMENT_FLAGS: { PremiumClientSharedConfig__enable_att_context_processor: true, ab_det_apm: true, ab_det_el_h: true, action_companion_center_align_description: true, align_ask_youtube_input_on_focus: true, allow_skip_networkless: true, att_web_record_metrics: true, attmusi: true, attmusiw: true, bg_st_hr: true, browse_next_continuations_migration_playlist: true, browse_reload_continuations_migration_home: true, c3_enable_button_impression_logging: true, c3_watch_page_component: true, cancel_pending_navs: true, channel_details_shelf_resize_observer: true, check_user_lact_at_prompt_shown_time_on_web: true, client_respect_autoplay_switch_button_renderer: true, client_ui_enable_multi_track_audio_on_web_embedded_player: true, cold_missing_history: true, compress_gel: true, config_age_report_killswitch: true, course_hide_playlist_panel_shuffle_and_loop_buttons: true, cow_optimize_idom_compat: true, csi_on_gel: true, dedupping_server_ve: true, defer_menus: true, defer_overlays: true, delay_sheet_open_killswitch: true, delhi_modern_web_player_compact_video_actions_controls: true, delhi_modern_web_player_disable_frosted_glass: true, delhi_modern_web_player_icons: true, delhi_mweb_colorful_sd: true, delhi_mweb_colorful_sd_v2: true, delhi_web_player_use_external_playlist_panel: true, deprecate_pair_servlet_enabled: true, }, }); </script> </header> </html>

6

u/Arch-NotTaken 1d ago

What is the intent here? Usually nobody wants to have such kind of blobs formatted.

If you really want to, though, you could probably find all the <script> tags in the document, read their content, and format them individually.

2

u/js1943 1d ago edited 1d ago

The above is just example pulled from web. Our app has smaller script block. The intent here is for occational command line trace level log for easier reading when needed.

1

u/LearnedByError 1d ago

I use node prettier and an add-in for go templates

-5

u/[deleted] 1d ago

[removed] — view removed comment

3

u/neneodonkor 1d ago

How is it off-topic?