Class: CodeTabsCustomerRenderer
- Inherits:
-
JekyllCommonMarkCustomRenderer
- Object
- JekyllCommonMarkCustomRenderer
- CodeTabsCustomerRenderer
- Defined in:
- lib/jdvp-codetabs-commonmark.rb
Instance Method Summary collapse
- #code_block(node) ⇒ Object
-
#create_tabbed_code_header(node) ⇒ Object
Creates the tab header portion of the code switcher.
- #get_code_copy_Lines(node) ⇒ Object
-
#get_code_language(node) ⇒ Object
Gets the language used in the code fence (the part typically immediately after a triple backtick in markdown).
-
#get_code_language_label(node) ⇒ Object
Gets the label shown to the user.
-
#get_code_language_switcher_class(node) ⇒ Object
Gets language class name used for the code switcher.
-
#is_copy_action_enabled(node) ⇒ Object
Determines whether the copy action should be shown for a given code block based on info in the code fence info.
-
#split_lanugage_fence_info(node) ⇒ Object
Splits the code fence into the language and extra info Removes the codeCopyEnabled item which is just a flag used to enable showing a copy action button.
Instance Method Details
#code_block(node) ⇒ Object
9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 |
# File 'lib/jdvp-codetabs-commonmark.rb', line 9 def code_block(node) #Determine what objects this code block is surrounded by. previous_node_type = node&.previous&.type&.to_s next_node_type = node&.next&.type&.to_s #If this item has neighboring code blocks or a custom tab header, it should show tabs using_custom_label = (split_lanugage_fence_info(node)&.size || 0) > 1 is_header_item = previous_node_type != "code_block" && (next_node_type == "code_block" || using_custom_label) is_alone = previous_node_type != "code_block" && next_node_type != "code_block" && !using_custom_label #Get a unique ID per code block in order to allow code copying individual_code_block_id = SecureRandom.uuid #Create a header if necessary and then creates the wrapper for each item #This allows tabs to be selected individaully if (is_header_item) create_tabbed_code_header(node) out("<li class=\"code_switcher_container_parent active-tab #{get_code_language_switcher_class(node)} #{individual_code_block_id}\">") elsif (!is_alone) out("<li class=\"code_switcher_container_parent #{get_code_language_switcher_class(node)} #{individual_code_block_id}\">") else out("<div class=\"code_switcher_container_parent #{individual_code_block_id}\">") end #Add the action buttons for this code block #Changing theme button is added to all code blocks, but the copy button is configurable. out("<div class=\"code_switcher_code_action_container\">") if (is_copy_action_enabled(node)) if (!@added_copy_snackbar) out("<div id=\"code_copied_snackbar\">Copied!</div>") @added_copy_snackbar = true end out("<button class=\"code_switcher_copy_button\" title=\"Copy\" onclick=\"copyText(\'#{individual_code_block_id}\', \'#{get_code_copy_Lines(node)}\')\"></button>") end out("<button class=\"code_switcher_theme_button\" onclick=\"updateTheme(true)\"></button>") out("</div>") #Generate the actual code block from markdown using the super class super(node) #Close this code block's container if (!is_alone) out("</li>") else out("</div>") end #Closee the entire tab container if this is the last code block in a tabbed container if (next_node_type != "code_block" && !is_alone) out("</ul>") end end |
#create_tabbed_code_header(node) ⇒ Object
Creates the tab header portion of the code switcher
95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 |
# File 'lib/jdvp-codetabs-commonmark.rb', line 95 def create_tabbed_code_header(node) uuid = SecureRandom.uuid out("<ul class=\"code-tab-container #{uuid}\">") tab_number = 0 tab_node = node while tab_node&.type&.to_s == 'code_block' label = get_code_language_label(tab_node) active_tab_class = (tab_number == 0) ? "active-tab" : "" code_lang_class = get_code_language_switcher_class(tab_node) out("<li class=\"#{active_tab_class} #{code_lang_class}\">") out("<a onclick=\"selectTab('#{code_lang_class}', '#{uuid}', #{tab_number})\">#{label}</a>") out("</li>") tab_node = tab_node&.next tab_number = tab_number + 1 end out("</ul>") out("<ul class=\"code-tab-switcher #{uuid}\">") end |
#get_code_copy_Lines(node) ⇒ Object
90 91 92 |
# File 'lib/jdvp-codetabs-commonmark.rb', line 90 def get_code_copy_Lines(node) node&.fence_info[/ codeCopyEnabled=?"?([\ \-\,0-9]*)"?/, 1] || "" end |
#get_code_language(node) ⇒ Object
Gets the language used in the code fence (the part typically immediately after a triple backtick in markdown)
69 70 71 |
# File 'lib/jdvp-codetabs-commonmark.rb', line 69 def get_code_language(node) split_lanugage_fence_info(node)&.first || "unknown" end |
#get_code_language_label(node) ⇒ Object
Gets the label shown to the user. This is the rest of code fence after the first space
74 75 76 |
# File 'lib/jdvp-codetabs-commonmark.rb', line 74 def get_code_language_label(node) split_lanugage_fence_info(node)&.last || "Code" end |
#get_code_language_switcher_class(node) ⇒ Object
Gets language class name used for the code switcher. This allows selection of the same language across multiple code tab items.
80 81 82 83 |
# File 'lib/jdvp-codetabs-commonmark.rb', line 80 def get_code_language_switcher_class(node) lang = get_code_language(node) lang == "unknown" ? "" : "code_switcher_#{lang&.downcase}" end |
#is_copy_action_enabled(node) ⇒ Object
Determines whether the copy action should be shown for a given code block based on info in the code fence info
86 87 88 |
# File 'lib/jdvp-codetabs-commonmark.rb', line 86 def is_copy_action_enabled(node) node&.fence_info&.include?("codeCopyEnabled") || false end |
#split_lanugage_fence_info(node) ⇒ Object
Splits the code fence into the language and extra info Removes the codeCopyEnabled item which is just a flag used to enable showing a copy action button
64 65 66 |
# File 'lib/jdvp-codetabs-commonmark.rb', line 64 def split_lanugage_fence_info(node) node&.fence_info&.sub(/ codeCopyEnabled=?"?([\ \-\,0-9]*)"?/, "")&.split(/[\s,]/, 2) end |