[{"data":1,"prerenderedAt":2156},["ShallowReactive",2],{"/blog/markdown-kramdown-tips-and-tricks":3,"navigation-en-us":1370,"banner-en-us":1796,"footer-en-us":1806,"blog-post-authors-en-us-Marcia Ramos":2051,"blog-related-posts-en-us-markdown-kramdown-tips-and-tricks":2066,"blog-promotions-en-us":2092,"next-steps-en-us":2146},{"id":4,"title":5,"authors":6,"body":8,"category":1340,"date":1341,"description":1342,"extension":200,"externalUrl":1343,"faq":1343,"featured":1344,"heroImage":1345,"meta":1346,"navigation":511,"path":1361,"seo":1362,"slug":1366,"stem":1367,"tags":1343,"template":1368,"updatedDate":1343,"__hash__":1369},"blogPosts/en-us/blog/markdown-kramdown-tips-and-tricks.md","Markdown Kramdown Tips and Tricks",[7],"Marcia Ramos",{"type":9,"value":10,"toc":1320},"minimark",[11,15,27,34,37,42,49,51,55,74,93,97,105,108,112,120,127,131,139,144,147,190,196,213,216,228,231,246,249,256,259,274,277,284,287,290,294,301,343,349,363,366,396,399,405,419,422,426,434,449,452,460,463,485,488,604,615,617,621,629,648,655,670,673,689,692,694,698,701,736,743,747,752,755,799,806,810,829,895,905,920,924,930,1077,1100,1103,1105,1109,1112,1121,1124,1133,1136,1163,1166,1176,1184,1186,1190,1197,1262,1269,1271,1275,1285,1304,1307,1314,1317],[12,13,14],"p",{},"If you use a markdown engine for writing your website content and you'd like to\nlearn a few tricks to have more freedom with it, this post is for you.",[12,16,17,18,22,23,26],{},"The markdown engine we use for ",[19,20,21],"span",{},"about.GitLab.com"," is ",[19,24,25],{},"Kramdown",", and that is the one\nwe'll be referring to on this post.",[12,28,29,33],{},[30,31,32],"strong",{},"Note:"," We assume you already know what a markdown engine is and how it is applied to a website.",[35,36],"hr",{},[38,39,41],"h2",{"id":40},"on-this-post","On this post",[43,44,45],"ul",{},[46,47,48],"li",{},"TOC",[35,50],{},[38,52,54],{"id":53},"our-markdown-guide","Our Markdown Guide",[12,56,57,58,64,65,68,69,73],{},"Last week a lot of ",[59,60,63],"a",{"href":61,"rel":62},"https://news.ycombinator.com/item?id=12091638",[],"people were happy"," for our ",[19,66,67],{},"Handbook"," being open source, as we explained\nin details on the post \"",[59,70,72],{"href":71},"/blog/our-handbook-is-open-source-heres-why/","Our Handbook is open source: here's why","\".\nEvery GitLab Team member does touch our website, starting on his or her first weeks,\nas part of the onboarding tasks.\nDoesn't matter if he or she is an advanced programmer or never have seen an HTML code before,\ncollaborating is the key for making sure we are all on the same side. And we love it!",[12,75,76,77,82,83,86,87,92],{},"One of our Handbook pages is a full ",[59,78,81],{"href":79,"rel":80},"https://handbook.gitlab.com/docs/markdown-guide/",[],"Markdown Guide"," for the markup\nthat we use in our website, generated by ",[19,84,85],{},"Middleman",".\nIt brings a lot of details on how to use Kramdown for writing content.\nEvery markdown page of this website, which is an ",[59,88,91],{"href":89,"rel":90},"https://gitlab.com/gitlab-com/www-gitlab-com",[],"open\nsource project"," available for peeking and contributing, can use any\nof the rules explained there. This April we changed the markdown engine from RDiscount to\nKramdown, and not everybody in our Team knew the new \"magical\" stuff we could use from this change. That's\nwhy we decided that writing a guide would be useful for those already used to markdown, and\nhelpful for those completely new to it.",[38,94,96],{"id":95},"why-kramdown","Why Kramdown",[12,98,99,100,104],{},"Perhaps your first question will be something like \"okay, why is Kramdown so special?\". My first\nexperience with markdown was when I first used a ",[59,101,103],{"href":102},"/blog/ssg-overview-gitlab-pages-part-2/","Static Site Generator",", Jekyll. Coming from\nprevious experiences in web development on PHP and HTML, the first thing I wanted to do to a\nmarkdown post was adding a class to a particular heading. When I googled for that, I was pretty\ndisappointed because apparently we aren't supposed to apply classes inline into markdown files.\nSo, I had to experiment a lot until I got the desired result: add some color to my heading.",[12,106,107],{},"After trying a lot of new tweaks, and digging through the web for answers that insisted on not coming, I finally\nfound out that with Kramdown, yes, I could do a lot of things. And finally I could apply some inline classes\nthrough my posts and have my blue headings when I wanted them blue. But at that time, I hadn't noticed\nthat we could do some really great magic with it, and that's what I'm sharing with you in this post.",[38,109,111],{"id":110},"the-magic","The magic",[12,113,114,115,119],{},"We could say that the Kramdown magic concentrates to the following syntax: ",[116,117,118],"code",{},"{: something}",".\nThis little devil is the basis of a lot of awesome resources.",[12,121,122,123,126],{},"Let's go over a few of them now, but you'll find a lot more in our ",[59,124,81],{"href":79,"rel":125},[],".",[38,128,130],{"id":129},"classes-ids-and-attributes","Classes, IDs and Attributes",[12,132,133,134,138],{},"Let's start with something classic, as the ability of ",[59,135,137],{"href":79,"rel":136},[],"applying CSS classes, custom IDs, and custom\nattributes"," to the elements.",[140,141,143],"h3",{"id":142},"applying-classes","Applying classes",[12,145,146],{},"If you think of any CSS class, what comes into your mind first? I suppose it's something like:",[148,149,154],"pre",{"className":150,"code":151,"language":152,"meta":153,"style":153},"language-css shiki shiki-themes github-light",".blue {\n  color: blue;\n}\n","css","",[116,155,156,168,184],{"__ignoreMap":153},[19,157,160,164],{"class":158,"line":159},"line",1,[19,161,163],{"class":162},"s7eDp",".blue",[19,165,167],{"class":166},"sgsFI"," {\n",[19,169,171,175,178,181],{"class":158,"line":170},2,[19,172,174],{"class":173},"sYu0t","  color",[19,176,177],{"class":166},": ",[19,179,180],{"class":173},"blue",[19,182,183],{"class":166},";\n",[19,185,187],{"class":158,"line":186},3,[19,188,189],{"class":166},"}\n",[12,191,192,193,195],{},"Okay, we have a ",[116,194,163],{}," class. Let's say once in a while we want a blue paragraph or a blue heading. Just do:",[148,197,201],{"className":198,"code":199,"language":200,"meta":153,"style":153},"language-md shiki shiki-themes github-light","This is a paragraph that for some reason we want blue.\n{: .blue}\n","md",[116,202,203,208],{"__ignoreMap":153},[19,204,205],{"class":158,"line":159},[19,206,207],{"class":166},"This is a paragraph that for some reason we want blue.\n",[19,209,210],{"class":158,"line":170},[19,211,212],{"class":166},"{: .blue}\n",[12,214,215],{},"And of course, the output will be:",[217,218,222,223],"div",{"className":219},[220,221],"panel","panel-info","\n**Output**\n",[217,224,227],{"className":225},[226],"panel-body","\nThis is a paragraph that for some reason we want blue.\n",[12,229,230],{},"And if we want a blue heading, we do exact the same thing:",[148,232,234],{"className":198,"code":233,"language":200,"meta":153,"style":153},"#### A blue heading\n{: .blue}\n",[116,235,236,242],{"__ignoreMap":153},[19,237,238],{"class":158,"line":159},[19,239,241],{"class":240},"surfw","#### A blue heading\n",[19,243,244],{"class":158,"line":170},[19,245,212],{"class":166},[12,247,248],{},"And the output is going to behave as we expect it to:",[217,250,222,252],{"className":251},[220,221],[217,253,255],{"className":254},[226],"\n#### A blue heading\n",[12,257,258],{},"What if I want to apply two classes at the same time?",[148,260,262],{"className":198,"code":261,"language":200,"meta":153,"style":153},"A blue and bold paragraph.\n{: .blue .bold}\n",[116,263,264,269],{"__ignoreMap":153},[19,265,266],{"class":158,"line":159},[19,267,268],{"class":166},"A blue and bold paragraph.\n",[19,270,271],{"class":158,"line":170},[19,272,273],{"class":166},"{: .blue .bold}\n",[12,275,276],{},"And the output will be as expected:",[217,278,222,280],{"className":279},[220,221],[217,281,283],{"className":282},[226],"\nA blue and bold paragraph.\n",[12,285,286],{},"As simple as that! The markup is simple and intuitive.",[12,288,289],{},"Now, guess what, we can do exactly the same for IDs!",[140,291,293],{"id":292},"custom-ids","Custom IDs",[12,295,296,297,300],{},"Kramdown itself will append an ID for each heading, automatically. The ID will be all the words\nin the heading together, connected by dashes. For the example above, \"A blue heading\", the HTML output ID\nwill be ",[116,298,299],{},"a-blue-heading",":",[148,302,306],{"className":303,"code":304,"language":305,"meta":153,"style":153},"language-html shiki shiki-themes github-light","\u003Ch4 class=\"blue\" id=\"a-blue-heading\">A blue heading\u003C/h4>\n","html",[116,307,308],{"__ignoreMap":153},[19,309,310,313,317,320,323,327,330,332,335,338,340],{"class":158,"line":159},[19,311,312],{"class":166},"\u003C",[19,314,316],{"class":315},"shJU0","h4",[19,318,319],{"class":162}," class",[19,321,322],{"class":166},"=",[19,324,326],{"class":325},"sYBdl","\"blue\"",[19,328,329],{"class":162}," id",[19,331,322],{"class":166},[19,333,334],{"class":325},"\"a-blue-heading\"",[19,336,337],{"class":166},">A blue heading\u003C/",[19,339,316],{"class":315},[19,341,342],{"class":166},">\n",[12,344,345,346,300],{},"Let's say we want the ID called ",[116,347,348],{},"blue-h",[148,350,352],{"className":198,"code":351,"language":200,"meta":153,"style":153},"#### A blue heading\n{: .blue #blue-h}\n",[116,353,354,358],{"__ignoreMap":153},[19,355,356],{"class":158,"line":159},[19,357,241],{"class":240},[19,359,360],{"class":158,"line":170},[19,361,362],{"class":166},"{: .blue #blue-h}\n",[12,364,365],{},"Will produce exactly what it's meant to (a blue heading with the custom ID):",[148,367,369],{"className":303,"code":368,"language":305,"meta":153,"style":153},"\u003Ch4 class=\"blue\" id=\"blue-h\">A blue heading\u003C/h4>\n",[116,370,371],{"__ignoreMap":153},[19,372,373,375,377,379,381,383,385,387,390,392,394],{"class":158,"line":159},[19,374,312],{"class":166},[19,376,316],{"class":315},[19,378,319],{"class":162},[19,380,322],{"class":166},[19,382,326],{"class":325},[19,384,329],{"class":162},[19,386,322],{"class":166},[19,388,389],{"class":325},"\"blue-h\"",[19,391,337],{"class":166},[19,393,316],{"class":315},[19,395,342],{"class":166},[12,397,398],{},"So, the output would be:",[217,400,222,402],{"className":401},[220,221],[217,403,255],{"className":404},[226],[12,406,407,408,411,412,415,416,126],{},"Note that we can attribute both class and ID in one markup, as in ",[116,409,410],{},"{: .class #custom-id}",". But we can use\njust one of them too: ",[116,413,414],{},"{: .class}"," or ",[116,417,418],{},"{: #custom-id}",[12,420,421],{},"Interesting, isn't it?",[140,423,425],{"id":424},"custom-attributes","Custom Attributes",[12,427,428,429,433],{},"Yes, we can go even further and apply any ",[430,431,432],"em",{},"key/value"," pair we need:",[148,435,437],{"className":198,"code":436,"language":200,"meta":153,"style":153},"An example of key/value pair\n{: .class #id key=\"value\"}\n",[116,438,439,444],{"__ignoreMap":153},[19,440,441],{"class":158,"line":159},[19,442,443],{"class":166},"An example of key/value pair\n",[19,445,446],{"class":158,"line":170},[19,447,448],{"class":166},"{: .class #id key=\"value\"}\n",[12,450,451],{},"We can use them, for example, for quickly applying general styles:",[148,453,458],{"className":454,"code":456,"language":457,"meta":153},[455],"language-text","#### A simple example\n{: #custom-id style=\"margin-top:0\"}\n","text",[116,459,456],{"__ignoreMap":153},[12,461,462],{},"But they are specially useful for links, as in:",[148,464,466],{"className":198,"code":465,"language":200,"meta":153,"style":153},"[text][identifier]{: #custom-id key=\"value\"}\n",[116,467,468],{"__ignoreMap":153},[19,469,470,473,476,479,482],{"class":158,"line":159},[19,471,472],{"class":166},"[",[19,474,457],{"class":475},"sEuWB",[19,477,478],{"class":166},"][",[19,480,481],{"class":475},"identifier",[19,483,484],{"class":166},"]{: #custom-id key=\"value\"}\n",[12,486,487],{},"This way we can call a JavaScript function, for example:",[148,489,491],{"className":198,"code":490,"language":200,"meta":153,"style":153},"[CLICK ME][identifier]{: #custom-id onclick=\"myJsFunc();\"}\n\n\u003Cscript type=\"text/javascript\">\n  function myJsFunc() {\n  var answer = confirm (\"Please click on OK to continue.\")\n  if (answer)\n  window.location=\"#\";\n  }\n\u003C/script>\n",[116,492,493,507,513,530,543,566,575,588,594],{"__ignoreMap":153},[19,494,495,497,500,502,504],{"class":158,"line":159},[19,496,472],{"class":166},[19,498,499],{"class":475},"CLICK ME",[19,501,478],{"class":166},[19,503,481],{"class":475},[19,505,506],{"class":166},"]{: #custom-id onclick=\"myJsFunc();\"}\n",[19,508,509],{"class":158,"line":170},[19,510,512],{"emptyLinePlaceholder":511},true,"\n",[19,514,515,517,520,523,525,528],{"class":158,"line":186},[19,516,312],{"class":166},[19,518,519],{"class":315},"script",[19,521,522],{"class":162}," type",[19,524,322],{"class":166},[19,526,527],{"class":325},"\"text/javascript\"",[19,529,342],{"class":166},[19,531,533,537,540],{"class":158,"line":532},4,[19,534,536],{"class":535},"sD7c4","  function",[19,538,539],{"class":162}," myJsFunc",[19,541,542],{"class":166},"() {\n",[19,544,546,549,552,554,557,560,563],{"class":158,"line":545},5,[19,547,548],{"class":535},"  var",[19,550,551],{"class":166}," answer ",[19,553,322],{"class":535},[19,555,556],{"class":162}," confirm",[19,558,559],{"class":166}," (",[19,561,562],{"class":325},"\"Please click on OK to continue.\"",[19,564,565],{"class":166},")\n",[19,567,569,572],{"class":158,"line":568},6,[19,570,571],{"class":535},"  if",[19,573,574],{"class":166}," (answer)\n",[19,576,578,581,583,586],{"class":158,"line":577},7,[19,579,580],{"class":166},"  window.location",[19,582,322],{"class":535},[19,584,585],{"class":325},"\"#\"",[19,587,183],{"class":166},[19,589,591],{"class":158,"line":590},8,[19,592,593],{"class":166},"  }\n",[19,595,597,600,602],{"class":158,"line":596},9,[19,598,599],{"class":166},"\u003C/",[19,601,519],{"class":315},[19,603,342],{"class":166},[217,605,222,607],{"className":606},[220,221],[217,608,610,611],{"className":609},[226],"\n[CLICK ME][identifier]\n",[519,612,614],{"type":613},"text/javascript","\nfunction myJsFunc() {\nvar answer = confirm (\"Please click on OK to continue.\")\nif (answer)\nwindow.location=\"#\";\n}\n",[35,616],{},[38,618,620],{"id":619},"table-of-contents-toc","Table of Contents (ToC)",[12,622,623,624,628],{},"A ToC is so awesome and easy to produce. Have you noticed ",[59,625,627],{"href":626},"#on-this-post","our ToC","\non this post? It's generated automatically by Kramdown with this simple markup:",[148,630,632],{"className":198,"code":631,"language":200,"meta":153,"style":153},"- TOC\n{:toc}\n",[116,633,634,643],{"__ignoreMap":153},[19,635,636,640],{"class":158,"line":159},[19,637,639],{"class":638},"sqxcx","-",[19,641,642],{"class":166}," TOC\n",[19,644,645],{"class":158,"line":170},[19,646,647],{"class":166},"{:toc}\n",[12,649,650,651,654],{},"All the file headings will be all automatically included in the ToC, except for those we don't want there.\nFor these, we apply a class called ",[116,652,653],{},"no_toc",", and Kramdown will respect our will:",[148,656,658],{"className":198,"code":657,"language":200,"meta":153,"style":153},"#### This heading will not be included in the ToC.\n{: .no_toc}\n",[116,659,660,665],{"__ignoreMap":153},[19,661,662],{"class":158,"line":159},[19,663,664],{"class":240},"#### This heading will not be included in the ToC.\n",[19,666,667],{"class":158,"line":170},[19,668,669],{"class":166},"{: .no_toc}\n",[12,671,672],{},"And of course, we can make the ToC an ordered list instead of unordered:",[148,674,676],{"className":198,"code":675,"language":200,"meta":153,"style":153},"1. TOC\n{:toc}\n",[116,677,678,685],{"__ignoreMap":153},[19,679,680,683],{"class":158,"line":159},[19,681,682],{"class":638},"1.",[19,684,642],{"class":166},[19,686,687],{"class":158,"line":170},[19,688,647],{"class":166},[12,690,691],{},"Awesome, isn't it?",[35,693],{},[38,695,697],{"id":696},"html-blocks","HTML Blocks",[12,699,700],{},"Whenever we need HTML blocks, we can use them freely!",[148,702,704],{"className":303,"code":703,"language":305,"meta":153,"style":153},"\u003Cdiv>\n  \u003Cp>Hello World\u003C/p>\n\u003C/div>\n",[116,705,706,714,728],{"__ignoreMap":153},[19,707,708,710,712],{"class":158,"line":159},[19,709,312],{"class":166},[19,711,217],{"class":315},[19,713,342],{"class":166},[19,715,716,719,721,724,726],{"class":158,"line":170},[19,717,718],{"class":166},"  \u003C",[19,720,12],{"class":315},[19,722,723],{"class":166},">Hello World\u003C/",[19,725,12],{"class":315},[19,727,342],{"class":166},[19,729,730,732,734],{"class":158,"line":186},[19,731,599],{"class":166},[19,733,217],{"class":315},[19,735,342],{"class":166},[12,737,738,739,742],{},"In our ",[19,740,741],{},"Marketing Handbook"," you will find plenty of them.",[140,744,746],{"id":745},"font-awesome","Font Awesome",[12,748,749,751],{},[19,750,746],{}," is a good use-case for HTML blocks within markdown files.",[12,753,754],{},"Check this!",[148,756,758],{"className":303,"code":757,"language":305,"meta":153,"style":153},"We \u003Ci class=\"fas fa-heart\" aria-hidden=\"true\" style=\"color:#c7254e\">\u003C/i> GitLab!\n",[116,759,760],{"__ignoreMap":153},[19,761,762,765,768,770,772,775,778,780,783,786,788,791,794,796],{"class":158,"line":159},[19,763,764],{"class":166},"We \u003C",[19,766,767],{"class":315},"i",[19,769,319],{"class":162},[19,771,322],{"class":166},[19,773,774],{"class":325},"\"fas fa-heart\"",[19,776,777],{"class":162}," aria-hidden",[19,779,322],{"class":166},[19,781,782],{"class":325},"\"true\"",[19,784,785],{"class":162}," style",[19,787,322],{"class":166},[19,789,790],{"class":325},"\"color:#c7254e\"",[19,792,793],{"class":166},">\u003C/",[19,795,767],{"class":315},[19,797,798],{"class":166},"> GitLab!\n",[217,800,222,802],{"className":801},[220,221],[217,803,805],{"className":804},[226],"\nWe  GitLab!\n",[140,807,809],{"id":808},"iframes","Iframes",[12,811,812,813,816,817,822,823,828],{},"We can embed anything within ",[116,814,815],{},"\u003Ciframe>"," tags, such as ",[59,818,821],{"href":819,"rel":820},"https://handbook.gitlab.com/docs/markdown-guide/#videos",[],"YouTube and Vimeo videos",",\nGoogle and OneDrive ",[59,824,827],{"href":825,"rel":826},"https://handbook.gitlab.com/docs/markdown-guide/#embed-documents",[],"documents"," and anything else available in iframes:",[148,830,832],{"className":303,"code":831,"language":305,"meta":153,"style":153},"\u003Cfigure class=\"video_container\">\n  \u003Ciframe src=\"https://www.youtube.com/embed/NoFLJLJ7abE\" frameborder=\"0\" allowfullscreen=\"true\"> \u003C/iframe>\n\u003C/figure>\n",[116,833,834,850,887],{"__ignoreMap":153},[19,835,836,838,841,843,845,848],{"class":158,"line":159},[19,837,312],{"class":166},[19,839,840],{"class":315},"figure",[19,842,319],{"class":162},[19,844,322],{"class":166},[19,846,847],{"class":325},"\"video_container\"",[19,849,342],{"class":166},[19,851,852,854,857,860,862,865,868,870,873,876,878,880,883,885],{"class":158,"line":170},[19,853,718],{"class":166},[19,855,856],{"class":315},"iframe",[19,858,859],{"class":162}," src",[19,861,322],{"class":166},[19,863,864],{"class":325},"\"https://www.youtube.com/embed/NoFLJLJ7abE\"",[19,866,867],{"class":162}," frameborder",[19,869,322],{"class":166},[19,871,872],{"class":325},"\"0\"",[19,874,875],{"class":162}," allowfullscreen",[19,877,322],{"class":166},[19,879,782],{"class":325},[19,881,882],{"class":166},"> \u003C/",[19,884,856],{"class":315},[19,886,342],{"class":166},[19,888,889,891,893],{"class":158,"line":186},[19,890,599],{"class":166},[19,892,840],{"class":315},[19,894,342],{"class":166},[12,896,897,898,901,902,126],{},"We are using the class ",[116,899,900],{},"video_container"," to make it ",[19,903,904],{},"responsive",[217,906,222,908],{"className":907},[220,221],[217,909,911],{"className":910},[226],[840,912,914],{"className":913},[900],[856,915,919],{"src":916,"frameBorder":917,"allowFullScreen":918},"https://www.youtube.com/embed/NoFLJLJ7abE","0","true"," ",[140,921,923],{"id":922},"codepen","CodePen",[12,925,926,929],{},[19,927,928],{},"CodePens"," are really good for some cases, when you want to display codes and results, for example. Check this cute dog,\ncreated with HTML and Sass:",[148,931,933],{"className":303,"code":932,"language":305,"meta":153,"style":153},"\u003Cp data-height=\"431\" data-theme-id=\"dark\" data-slug-hash=\"OXzjLL\" data-default-tab=\"html,result\" data-user=\"virtuacreative\" data-embed-version=\"2\" class=\"codepen\">See the Pen \u003Ca href=\"http://codepen.io/virtuacreative/pen/OXzjLL/\">Dog\u003C/a> by Virtua Creative (\u003Ca href=\"http://codepen.io/virtuacreative\">@virtuacreative\u003C/a>) on \u003Ca href=\"http://codepen.io\">CodePen\u003C/a>.\u003C/p>\n\u003Cscript async src=\"//assets.codepen.io/assets/embed/ei.js\">\u003C/script>\n",[116,934,935,1055],{"__ignoreMap":153},[19,936,937,939,941,944,946,949,952,954,957,960,962,965,968,970,973,976,978,981,984,986,989,991,993,996,999,1001,1004,1006,1009,1012,1014,1017,1019,1021,1023,1026,1029,1031,1034,1036,1038,1040,1043,1046,1048,1051,1053],{"class":158,"line":159},[19,938,312],{"class":166},[19,940,12],{"class":315},[19,942,943],{"class":162}," data-height",[19,945,322],{"class":166},[19,947,948],{"class":325},"\"431\"",[19,950,951],{"class":162}," data-theme-id",[19,953,322],{"class":166},[19,955,956],{"class":325},"\"dark\"",[19,958,959],{"class":162}," data-slug-hash",[19,961,322],{"class":166},[19,963,964],{"class":325},"\"OXzjLL\"",[19,966,967],{"class":162}," data-default-tab",[19,969,322],{"class":166},[19,971,972],{"class":325},"\"html,result\"",[19,974,975],{"class":162}," data-user",[19,977,322],{"class":166},[19,979,980],{"class":325},"\"virtuacreative\"",[19,982,983],{"class":162}," data-embed-version",[19,985,322],{"class":166},[19,987,988],{"class":325},"\"2\"",[19,990,319],{"class":162},[19,992,322],{"class":166},[19,994,995],{"class":325},"\"codepen\"",[19,997,998],{"class":166},">See the Pen \u003C",[19,1000,59],{"class":315},[19,1002,1003],{"class":162}," href",[19,1005,322],{"class":166},[19,1007,1008],{"class":325},"\"http://codepen.io/virtuacreative/pen/OXzjLL/\"",[19,1010,1011],{"class":166},">Dog\u003C/",[19,1013,59],{"class":315},[19,1015,1016],{"class":166},"> by Virtua Creative (\u003C",[19,1018,59],{"class":315},[19,1020,1003],{"class":162},[19,1022,322],{"class":166},[19,1024,1025],{"class":325},"\"http://codepen.io/virtuacreative\"",[19,1027,1028],{"class":166},">@virtuacreative\u003C/",[19,1030,59],{"class":315},[19,1032,1033],{"class":166},">) on \u003C",[19,1035,59],{"class":315},[19,1037,1003],{"class":162},[19,1039,322],{"class":166},[19,1041,1042],{"class":325},"\"http://codepen.io\"",[19,1044,1045],{"class":166},">CodePen\u003C/",[19,1047,59],{"class":315},[19,1049,1050],{"class":166},">.\u003C/",[19,1052,12],{"class":315},[19,1054,342],{"class":166},[19,1056,1057,1059,1061,1064,1066,1068,1071,1073,1075],{"class":158,"line":170},[19,1058,312],{"class":166},[19,1060,519],{"class":315},[19,1062,1063],{"class":162}," async",[19,1065,859],{"class":162},[19,1067,322],{"class":166},[19,1069,1070],{"class":325},"\"//assets.codepen.io/assets/embed/ei.js\"",[19,1072,793],{"class":166},[19,1074,519],{"class":315},[19,1076,342],{"class":166},[12,1078,1086,1087,1091,1092,1096,1097,126],{"dataHeight":1079,"dataThemeId":1080,"dataSlugHash":1081,"dataDefaultTab":1082,"dataUser":1083,"dataEmbedVersion":1084,"className":1085},"431","dark","OXzjLL","html,result","virtuacreative","2",[922],"See the Pen ",[59,1088,1090],{"href":1089},"http://codepen.io/virtuacreative/pen/OXzjLL/","Dog"," by Virtua Creative (",[59,1093,1095],{"href":1094},"http://codepen.io/virtuacreative","@virtuacreative",") on ",[59,1098,923],{"href":1099},"http://codepen.io",[519,1101],{"async":511,"src":1102},"//assets.codepen.io/assets/embed/ei.js",[35,1104],{},[38,1106,1108],{"id":1107},"mix-html-with-markdown","Mix HTML with Markdown",[12,1110,1111],{},"Yes, we definitely can do this! We need to add the following markup to the markdown document before mixing up\nHTML and markdown:",[148,1113,1115],{"className":198,"code":1114,"language":200,"meta":153,"style":153},"{::options parse_block_html=\"true\" /}\n",[116,1116,1117],{"__ignoreMap":153},[19,1118,1119],{"class":158,"line":159},[19,1120,1114],{"class":166},[12,1122,1123],{},"And we can close it any time, if necessary:",[148,1125,1127],{"className":198,"code":1126,"language":200,"meta":153,"style":153},"{::options parse_block_html=\"false\" /}\n",[116,1128,1129],{"__ignoreMap":153},[19,1130,1131],{"class":158,"line":159},[19,1132,1126],{"class":166},[12,1134,1135],{},"This is going to make this:",[148,1137,1139],{"className":303,"code":1138,"language":305,"meta":153,"style":153},"Something in **markdown**.\n\n\u003Cp>Then an HTML tag with crazy **markup**!\u003C/p>\n",[116,1140,1141,1146,1150],{"__ignoreMap":153},[19,1142,1143],{"class":158,"line":159},[19,1144,1145],{"class":166},"Something in **markdown**.\n",[19,1147,1148],{"class":158,"line":170},[19,1149,512],{"emptyLinePlaceholder":511},[19,1151,1152,1154,1156,1159,1161],{"class":158,"line":186},[19,1153,312],{"class":166},[19,1155,12],{"class":315},[19,1157,1158],{"class":166},">Then an HTML tag with crazy **markup**!\u003C/",[19,1160,12],{"class":315},[19,1162,342],{"class":166},[12,1164,1165],{},"To be displayed like this:",[217,1167,222,1169],{"className":1168},[220,221],[217,1170,1172,1173],{"className":1171},[226],"\nSomething in **markdown**.\n",[12,1174,1175],{},"Then an HTML tag with crazy **markup**!",[12,1177,1178,1179,1183],{},"Blue boxes, like this one above, used to ",[59,1180,1182],{"href":79,"rel":1181},[],"display the outputs"," on this post, were generated with this resource.",[35,1185],{},[38,1187,1189],{"id":1188},"styles","Styles",[12,1191,1192,1193,1196],{},"One of the most useful features is the ability to add ",[116,1194,1195],{},"\u003Cstyle>"," tags to our markdown file too!\nWe can do that for simply styling our web page without affecting the entire site. Just go on and add the\ntag to any part of your markdown:",[148,1198,1200],{"className":303,"code":1199,"language":305,"meta":153,"style":153},"\u003Cstyle>\n.blue {\n  color: blue;\n}\n.bold {\n  font-weight: bold;\n}\n\u003C/style>\n",[116,1201,1202,1211,1217,1227,1231,1238,1250,1254],{"__ignoreMap":153},[19,1203,1204,1206,1209],{"class":158,"line":159},[19,1205,312],{"class":166},[19,1207,1208],{"class":315},"style",[19,1210,342],{"class":166},[19,1212,1213,1215],{"class":158,"line":170},[19,1214,163],{"class":162},[19,1216,167],{"class":166},[19,1218,1219,1221,1223,1225],{"class":158,"line":186},[19,1220,174],{"class":173},[19,1222,177],{"class":166},[19,1224,180],{"class":173},[19,1226,183],{"class":166},[19,1228,1229],{"class":158,"line":532},[19,1230,189],{"class":166},[19,1232,1233,1236],{"class":158,"line":545},[19,1234,1235],{"class":162},".bold",[19,1237,167],{"class":166},[19,1239,1240,1243,1245,1248],{"class":158,"line":568},[19,1241,1242],{"class":173},"  font-weight",[19,1244,177],{"class":166},[19,1246,1247],{"class":173},"bold",[19,1249,183],{"class":166},[19,1251,1252],{"class":158,"line":577},[19,1253,189],{"class":166},[19,1255,1256,1258,1260],{"class":158,"line":590},[19,1257,599],{"class":166},[19,1259,1208],{"class":315},[19,1261,342],{"class":166},[12,1263,1264,1265,126],{},"This tag was applied to this very document to exemplify this case, also to help with the classes described\n",[59,1266,1268],{"href":1267},"#applying-classes","earlier in this post",[35,1270],{},[38,1272,1274],{"id":1273},"conclusion","Conclusion",[12,1276,1277,1278,1280,1281,1284],{},"There is a lot more you can do, mix, and bring together using ",[19,1279,25],{},". It's awesome! Check out\nour ",[59,1282,81],{"href":79,"rel":1283},[]," for more resources, examples and applications and use your creativity to create\nbeautiful posts, with great styles!",[12,1286,1287,1288,1291,1292,1295,1296,1299,1300,1303],{},"Anything else you know of and is not in our ",[19,1289,1290],{},"Guide","? Any new magic?\nAny trick? Please ",[19,1293,1294],{},"contribute"," by submitting an ",[19,1297,1298],{},"MR"," to the\n",[19,1301,1302],{},"source file",". Your collaboration is much appreciated.",[12,1305,1306],{},"Happy markdowning!",[12,1308,1309,1310,1313],{},"Follow ",[19,1311,1312],{},"@GitLab"," and stay tunned for the next post!",[1208,1315,1316],{},"\n.blue {\n  color: blue !important;\n}\n.bold {\n  font-weight: bold;\n}\n",[1208,1318,1319],{},"html pre.shiki code .s7eDp, html code.shiki .s7eDp{--shiki-default:#6F42C1}html pre.shiki code .sgsFI, html code.shiki .sgsFI{--shiki-default:#24292E}html pre.shiki code .sYu0t, html code.shiki .sYu0t{--shiki-default:#005CC5}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .surfw, html code.shiki .surfw{--shiki-default:#005CC5;--shiki-default-font-weight:bold}html pre.shiki code .shJU0, html code.shiki .shJU0{--shiki-default:#22863A}html pre.shiki code .sYBdl, html code.shiki .sYBdl{--shiki-default:#032F62}html pre.shiki code .sEuWB, html code.shiki .sEuWB{--shiki-default:#032F62;--shiki-default-text-decoration:underline}html pre.shiki code .sD7c4, html code.shiki .sD7c4{--shiki-default:#D73A49}html pre.shiki code .sqxcx, html code.shiki .sqxcx{--shiki-default:#E36209}",{"title":153,"searchDepth":170,"depth":170,"links":1321},[1322,1323,1324,1325,1326,1331,1332,1337,1338,1339],{"id":40,"depth":170,"text":41},{"id":53,"depth":170,"text":54},{"id":95,"depth":170,"text":96},{"id":110,"depth":170,"text":111},{"id":129,"depth":170,"text":130,"children":1327},[1328,1329,1330],{"id":142,"depth":186,"text":143},{"id":292,"depth":186,"text":293},{"id":424,"depth":186,"text":425},{"id":619,"depth":170,"text":620},{"id":696,"depth":170,"text":697,"children":1333},[1334,1335,1336],{"id":745,"depth":186,"text":746},{"id":808,"depth":186,"text":809},{"id":922,"depth":186,"text":923},{"id":1107,"depth":170,"text":1108},{"id":1188,"depth":170,"text":1189},{"id":1273,"depth":170,"text":1274},"engineering","2016-07-19","Learn how to apply classes to markdown, create ToCs, embed iframes and much more!",null,false,"https://res.cloudinary.com/about-gitlab-com/image/upload/v1749671850/Blog/Hero%20Images/markdown-kramdown-tips-and-tricks-cover.png",{"excerpt":1347},{"type":9,"value":1348},[1349,1351,1357],[12,1350,14],{},[12,1352,17,1353,22,1355,26],{},[19,1354,21],{},[19,1356,25],{},[12,1358,1359,33],{},[30,1360,32],{},"/en-us/blog/markdown-kramdown-tips-and-tricks",{"title":5,"description":1342,"ogTitle":5,"ogDescription":1342,"noIndex":1344,"ogImage":1345,"ogUrl":1363,"ogSiteName":1364,"ogType":1365,"canonicalUrls":1363},"https://about.gitlab.com/blog/markdown-kramdown-tips-and-tricks","https://about.gitlab.com","article","markdown-kramdown-tips-and-tricks","en-us/blog/markdown-kramdown-tips-and-tricks","BlogPost","x_wmPGRpw_6Kh77iEgGQz9mzBQAnnZ8G-84n94h4VJY",{"logo":1371,"freeTrial":1376,"sales":1381,"login":1386,"items":1391,"search":1716,"minimal":1747,"duo":1766,"switchNav":1775,"pricingDeployment":1786},{"config":1372},{"href":1373,"dataGaName":1374,"dataGaLocation":1375},"/","gitlab logo","header",{"text":1377,"config":1378},"Get free trial",{"href":1379,"dataGaName":1380,"dataGaLocation":1375},"https://gitlab.com/-/trial_registrations/new?glm_source=about.gitlab.com&glm_content=default-saas-trial/","free trial",{"text":1382,"config":1383},"Request a demo",{"href":1384,"dataGaName":1385,"dataGaLocation":1375},"/sales/?contact-topic=request-demo","sales",{"text":1387,"config":1388},"Sign in",{"href":1389,"dataGaName":1390,"dataGaLocation":1375},"https://gitlab.com/users/sign_in/","sign in",[1392,1421,1521,1526,1639,1694],{"text":1393,"config":1394,"menu":1396},"Platform",{"dataNavLevelOne":1395},"platform",{"type":1397,"columns":1398},"cards",[1399,1405,1413],{"title":1393,"description":1400,"link":1401},"The intelligent orchestration platform for DevSecOps",{"text":1402,"config":1403},"Explore our Platform",{"href":1404,"dataGaName":1395,"dataGaLocation":1375},"/platform/",{"title":1406,"description":1407,"link":1408},"GitLab Duo Agent Platform","Agentic AI for the entire software lifecycle",{"text":1409,"config":1410},"Meet GitLab Duo",{"href":1411,"dataGaName":1412,"dataGaLocation":1375},"/gitlab-duo-agent-platform/","gitlab duo agent platform",{"title":1414,"description":1415,"link":1416},"Why GitLab","See the top reasons enterprises choose GitLab",{"text":1417,"config":1418},"Learn more",{"href":1419,"dataGaName":1420,"dataGaLocation":1375},"/why-gitlab/","why gitlab",{"text":1422,"left":511,"config":1423,"menu":1425},"Product",{"dataNavLevelOne":1424},"solutions",{"type":1426,"link":1427,"columns":1431,"feature":1500},"lists",{"text":1428,"config":1429},"View all Solutions",{"href":1430,"dataGaName":1424,"dataGaLocation":1375},"/solutions/",[1432,1456,1479],{"title":1433,"description":1434,"link":1435,"items":1440},"Automation","CI/CD and automation to accelerate deployment",{"config":1436},{"icon":1437,"href":1438,"dataGaName":1439,"dataGaLocation":1375},"AutomatedCodeAlt","/solutions/delivery-automation/","automated software delivery",[1441,1445,1448,1452],{"text":1442,"config":1443},"CI/CD",{"href":1444,"dataGaLocation":1375,"dataGaName":1442},"/solutions/continuous-integration/",{"text":1406,"config":1446},{"href":1411,"dataGaLocation":1375,"dataGaName":1447},"gitlab duo agent platform - product menu",{"text":1449,"config":1450},"Source Code Management",{"href":1451,"dataGaLocation":1375,"dataGaName":1449},"/solutions/source-code-management/",{"text":1453,"config":1454},"Automated Software Delivery",{"href":1438,"dataGaLocation":1375,"dataGaName":1455},"Automated software delivery",{"title":1457,"description":1458,"link":1459,"items":1464},"Security","Deliver code faster without compromising security",{"config":1460},{"href":1461,"dataGaName":1462,"dataGaLocation":1375,"icon":1463},"/solutions/application-security-testing/","security and compliance","ShieldCheckLight",[1465,1469,1474],{"text":1466,"config":1467},"Application Security Testing",{"href":1461,"dataGaName":1468,"dataGaLocation":1375},"Application security testing",{"text":1470,"config":1471},"Software Supply Chain Security",{"href":1472,"dataGaLocation":1375,"dataGaName":1473},"/solutions/supply-chain/","Software supply chain security",{"text":1475,"config":1476},"Software Compliance",{"href":1477,"dataGaName":1478,"dataGaLocation":1375},"/solutions/software-compliance/","software compliance",{"title":1480,"link":1481,"items":1486},"Measurement",{"config":1482},{"icon":1483,"href":1484,"dataGaName":1485,"dataGaLocation":1375},"DigitalTransformation","/solutions/visibility-measurement/","visibility and measurement",[1487,1491,1495],{"text":1488,"config":1489},"Visibility & Measurement",{"href":1484,"dataGaLocation":1375,"dataGaName":1490},"Visibility and Measurement",{"text":1492,"config":1493},"Value Stream Management",{"href":1494,"dataGaLocation":1375,"dataGaName":1492},"/solutions/value-stream-management/",{"text":1496,"config":1497},"Analytics & Insights",{"href":1498,"dataGaLocation":1375,"dataGaName":1499},"/solutions/analytics-and-insights/","Analytics and insights",{"title":1501,"type":1426,"items":1502},"GitLab for",[1503,1509,1515],{"text":1504,"config":1505},"Enterprise",{"icon":1506,"href":1507,"dataGaLocation":1375,"dataGaName":1508},"Building","/enterprise/","enterprise",{"text":1510,"config":1511},"Small Business",{"icon":1512,"href":1513,"dataGaLocation":1375,"dataGaName":1514},"Work","/small-business/","small business",{"text":1516,"config":1517},"Public Sector",{"icon":1518,"href":1519,"dataGaLocation":1375,"dataGaName":1520},"Organization","/solutions/public-sector/","public sector",{"text":1522,"config":1523},"Pricing",{"href":1524,"dataGaName":1525,"dataGaLocation":1375,"dataNavLevelOne":1525},"/pricing/","pricing",{"text":1527,"config":1528,"menu":1530},"Resources",{"dataNavLevelOne":1529},"resources",{"type":1426,"link":1531,"columns":1535,"feature":1628},{"text":1532,"config":1533},"View all resources",{"href":1534,"dataGaName":1529,"dataGaLocation":1375},"/resources/",[1536,1569,1596],{"title":1537,"items":1538},"Getting started",[1539,1544,1549,1554,1559,1564],{"text":1540,"config":1541},"Install",{"href":1542,"dataGaName":1543,"dataGaLocation":1375},"/install/","install",{"text":1545,"config":1546},"Quick start guides",{"href":1547,"dataGaName":1548,"dataGaLocation":1375},"/get-started/","quick setup checklists",{"text":1550,"config":1551},"Learn",{"href":1552,"dataGaLocation":1375,"dataGaName":1553},"https://university.gitlab.com/","learn",{"text":1555,"config":1556},"Product documentation",{"href":1557,"dataGaName":1558,"dataGaLocation":1375},"https://docs.gitlab.com/","product documentation",{"text":1560,"config":1561},"Best practice videos",{"href":1562,"dataGaName":1563,"dataGaLocation":1375},"/getting-started-videos/","best practice videos",{"text":1565,"config":1566},"Integrations",{"href":1567,"dataGaName":1568,"dataGaLocation":1375},"/integrations/","integrations",{"title":1570,"items":1571},"Discover",[1572,1577,1582,1587,1591],{"text":1573,"config":1574},"Customer success stories",{"href":1575,"dataGaName":1576,"dataGaLocation":1375},"/customers/","customer success stories",{"text":1578,"config":1579},"Blog",{"href":1580,"dataGaName":1581,"dataGaLocation":1375},"/blog/","blog",{"text":1583,"config":1584},"Demo Hub",{"href":1585,"dataGaName":1586,"dataGaLocation":1375},"/demo-hub/","demo hub",{"text":1588,"config":1589},"The Source",{"href":1590,"dataGaName":1581,"dataGaLocation":1375},"/the-source/",{"text":1592,"config":1593},"Remote",{"href":1594,"dataGaName":1595,"dataGaLocation":1375},"https://handbook.gitlab.com/handbook/company/culture/all-remote/","remote",{"title":1597,"items":1598},"Connect",[1599,1604,1608,1613,1618,1623],{"text":1600,"config":1601},"GitLab Services",{"href":1602,"dataGaName":1603,"dataGaLocation":1375},"/services/","services",{"text":1605,"config":1606},"Contribute",{"href":1607,"dataGaName":1294,"dataGaLocation":1375},"https://contributors.gitlab.com",{"text":1609,"config":1610},"Community",{"href":1611,"dataGaName":1612,"dataGaLocation":1375},"/community/","community",{"text":1614,"config":1615},"Forum",{"href":1616,"dataGaName":1617,"dataGaLocation":1375},"https://forum.gitlab.com/","forum",{"text":1619,"config":1620},"Events",{"href":1621,"dataGaName":1622,"dataGaLocation":1375},"/events/","events",{"text":1624,"config":1625},"Partners",{"href":1626,"dataGaName":1627,"dataGaLocation":1375},"/partners/","partners",{"config":1629,"title":1632,"text":1633,"link":1634},{"background":1630,"textColor":1631},"url('https://res.cloudinary.com/about-gitlab-com/image/upload/v1777322348/qpq8yrgn8knii57omj0c.png')","#000","What’s new in GitLab","Stay updated with our latest features and improvements.",{"text":1635,"config":1636},"Read the latest",{"href":1637,"dataGaName":1638,"dataGaLocation":1375},"/whats-new/","whats new",{"text":1640,"config":1641,"menu":1643},"Company",{"dataNavLevelOne":1642},"company",{"type":1426,"columns":1644},[1645],{"items":1646},[1647,1652,1658,1660,1665,1669,1674,1679,1684,1689],{"text":1648,"config":1649},"About",{"href":1650,"dataGaName":1651,"dataGaLocation":1375},"/company/","about",{"text":1653,"config":1654,"footerGa":1657},"Jobs",{"href":1655,"dataGaName":1656,"dataGaLocation":1375},"/jobs/","jobs",{"dataGaName":1656},{"text":1619,"config":1659},{"href":1621,"dataGaName":1622,"dataGaLocation":1375},{"text":1661,"config":1662},"Leadership",{"href":1663,"dataGaName":1664,"dataGaLocation":1375},"/company/team/e-group/","leadership",{"text":67,"config":1666},{"href":1667,"dataGaName":1668,"dataGaLocation":1375},"https://handbook.gitlab.com/","handbook",{"text":1670,"config":1671},"Investor relations",{"href":1672,"dataGaName":1673,"dataGaLocation":1375},"https://ir.gitlab.com/overview/default.aspx","investor relations",{"text":1675,"config":1676},"Trust Center",{"href":1677,"dataGaName":1678,"dataGaLocation":1375},"/security/","trust center",{"text":1680,"config":1681},"AI Transparency Center",{"href":1682,"dataGaName":1683,"dataGaLocation":1375},"/ai-transparency-center/","ai transparency center",{"text":1685,"config":1686},"Newsletter",{"href":1687,"dataGaName":1688,"dataGaLocation":1375},"/company/contact/#contact-forms","newsletter",{"text":1690,"config":1691},"Press",{"href":1692,"dataGaName":1693,"dataGaLocation":1375},"/press/","press",{"text":1695,"config":1696,"menu":1697},"Contact us",{"dataNavLevelOne":1642},{"type":1426,"columns":1698},[1699],{"items":1700},[1701,1706,1711],{"text":1702,"config":1703},"Talk to sales",{"href":1704,"dataGaName":1705,"dataGaLocation":1375},"/sales/","talk to sales",{"text":1707,"config":1708},"Support portal",{"href":1709,"dataGaName":1710,"dataGaLocation":1375},"https://support.gitlab.com/hc/en-us","support portal",{"text":1712,"config":1713},"Customer portal",{"href":1714,"dataGaName":1715,"dataGaLocation":1375},"https://customers.gitlab.com/customers/sign_in/","customer portal",{"close":1717,"login":1718,"suggestions":1725},"Close",{"text":1719,"link":1720},"To search repositories and projects, login to",{"text":1721,"config":1722},"gitlab.com",{"href":1389,"dataGaName":1723,"dataGaLocation":1724},"search login","search",{"text":1726,"default":1727},"Suggestions",[1728,1730,1734,1736,1740,1744],{"text":1406,"config":1729},{"href":1411,"dataGaName":1406,"dataGaLocation":1724},{"text":1731,"config":1732},"Code Suggestions (AI)",{"href":1733,"dataGaName":1731,"dataGaLocation":1724},"/solutions/code-suggestions/",{"text":1442,"config":1735},{"href":1444,"dataGaName":1442,"dataGaLocation":1724},{"text":1737,"config":1738},"GitLab on AWS",{"href":1739,"dataGaName":1737,"dataGaLocation":1724},"/partners/technology-partners/aws/",{"text":1741,"config":1742},"GitLab on Google Cloud",{"href":1743,"dataGaName":1741,"dataGaLocation":1724},"/partners/technology-partners/google-cloud-platform/",{"text":1745,"config":1746},"Why GitLab?",{"href":1419,"dataGaName":1745,"dataGaLocation":1724},{"freeTrial":1748,"mobileIcon":1753,"desktopIcon":1758,"secondaryButton":1761},{"text":1749,"config":1750},"Start free trial",{"href":1751,"dataGaName":1380,"dataGaLocation":1752},"https://gitlab.com/-/trials/new/","nav",{"altText":1754,"config":1755},"Gitlab Icon",{"src":1756,"dataGaName":1757,"dataGaLocation":1752},"https://res.cloudinary.com/about-gitlab-com/image/upload/v1758203874/jypbw1jx72aexsoohd7x.svg","gitlab icon",{"altText":1754,"config":1759},{"src":1760,"dataGaName":1757,"dataGaLocation":1752},"https://res.cloudinary.com/about-gitlab-com/image/upload/v1758203875/gs4c8p8opsgvflgkswz9.svg",{"text":1762,"config":1763},"Get Started",{"href":1764,"dataGaName":1765,"dataGaLocation":1752},"https://gitlab.com/-/trial_registrations/new?glm_source=about.gitlab.com/get-started/","get started",{"freeTrial":1767,"mobileIcon":1771,"desktopIcon":1773},{"text":1768,"config":1769},"Learn more about GitLab Duo",{"href":1411,"dataGaName":1770,"dataGaLocation":1752},"gitlab duo",{"altText":1754,"config":1772},{"src":1756,"dataGaName":1757,"dataGaLocation":1752},{"altText":1754,"config":1774},{"src":1760,"dataGaName":1757,"dataGaLocation":1752},{"button":1776,"mobileIcon":1781,"desktopIcon":1783},{"text":1777,"config":1778},"/switch",{"href":1779,"dataGaName":1780,"dataGaLocation":1752},"#contact","switch",{"altText":1754,"config":1782},{"src":1756,"dataGaName":1757,"dataGaLocation":1752},{"altText":1754,"config":1784},{"src":1785,"dataGaName":1757,"dataGaLocation":1752},"https://res.cloudinary.com/about-gitlab-com/image/upload/v1773335277/ohhpiuoxoldryzrnhfrh.png",{"freeTrial":1787,"mobileIcon":1792,"desktopIcon":1794},{"text":1788,"config":1789},"Back to pricing",{"href":1524,"dataGaName":1790,"dataGaLocation":1752,"icon":1791},"back to pricing","GoBack",{"altText":1754,"config":1793},{"src":1756,"dataGaName":1757,"dataGaLocation":1752},{"altText":1754,"config":1795},{"src":1760,"dataGaName":1757,"dataGaLocation":1752},{"title":1797,"titleMobile":1798,"button":1799,"config":1804},"Duo Agent Platform delivers 400% ROI, per new Forrester Consulting study.","400% ROI: Forrester TEI for GitLab Duo",{"text":1417,"config":1800},{"href":1801,"dataGaName":1802,"dataGaLocation":1803},"https://about.gitlab.com/blog/gitlab-duo-agent-platform-delivers-400-percent-roi/","forrester-tei-dap-banner","global-banner",{"layout":1805,"disabled":1344},"release",{"data":1807},{"text":1808,"source":1809,"edit":1815,"contribute":1820,"config":1825,"items":1830,"minimal":2040},"Git is a trademark of Software Freedom Conservancy and our use of 'GitLab' is under license",{"text":1810,"config":1811},"View page source",{"href":1812,"dataGaName":1813,"dataGaLocation":1814},"https://gitlab.com/gitlab-com/marketing/digital-experience/about-gitlab-com/","page source","footer",{"text":1816,"config":1817},"Edit this page",{"href":1818,"dataGaName":1819,"dataGaLocation":1814},"https://gitlab.com/gitlab-com/marketing/digital-experience/about-gitlab-com/-/blob/main/content/","web ide",{"text":1821,"config":1822},"Please contribute",{"href":1823,"dataGaName":1824,"dataGaLocation":1814},"https://gitlab.com/gitlab-com/marketing/digital-experience/about-gitlab-com/-/blob/main/CONTRIBUTING.md/","please contribute",{"twitter":1826,"facebook":1827,"youtube":1828,"linkedin":1829},"https://twitter.com/gitlab","https://www.facebook.com/gitlab","https://www.youtube.com/channel/UCnMGQ8QHMAnVIsI3xJrihhg","https://www.linkedin.com/company/gitlab-com",[1831,1878,1932,1976,2008],{"title":1522,"links":1832,"subMenu":1847},[1833,1837,1842],{"text":1834,"config":1835},"View plans",{"href":1524,"dataGaName":1836,"dataGaLocation":1814},"view plans",{"text":1838,"config":1839},"Why Premium?",{"href":1840,"dataGaName":1841,"dataGaLocation":1814},"/pricing/premium/","why premium",{"text":1843,"config":1844},"Why Ultimate?",{"href":1845,"dataGaName":1846,"dataGaLocation":1814},"/pricing/ultimate/","why ultimate",[1848],{"title":1849,"links":1850},"Contact Us",[1851,1854,1856,1858,1863,1868,1873],{"text":1852,"config":1853},"Contact sales",{"href":1704,"dataGaName":1385,"dataGaLocation":1814},{"text":1707,"config":1855},{"href":1709,"dataGaName":1710,"dataGaLocation":1814},{"text":1712,"config":1857},{"href":1714,"dataGaName":1715,"dataGaLocation":1814},{"text":1859,"config":1860},"Status",{"href":1861,"dataGaName":1862,"dataGaLocation":1814},"https://status.gitlab.com/","status",{"text":1864,"config":1865},"Terms of use",{"href":1866,"dataGaName":1867,"dataGaLocation":1814},"/terms/","terms of use",{"text":1869,"config":1870},"Privacy statement",{"href":1871,"dataGaName":1872,"dataGaLocation":1814},"/privacy/","privacy statement",{"text":1874,"config":1875},"Cookie preferences",{"dataGaName":1876,"dataGaLocation":1814,"id":1877,"isOneTrustButton":511},"cookie preferences","ot-sdk-btn",{"title":1422,"links":1879,"subMenu":1888},[1880,1884],{"text":1881,"config":1882},"DevSecOps platform",{"href":1404,"dataGaName":1883,"dataGaLocation":1814},"devsecops platform",{"text":1885,"config":1886},"AI-Assisted Development",{"href":1411,"dataGaName":1887,"dataGaLocation":1814},"ai-assisted development",[1889],{"title":1890,"links":1891},"Topics",[1892,1897,1902,1907,1912,1917,1922,1927],{"text":1893,"config":1894},"CICD",{"href":1895,"dataGaName":1896,"dataGaLocation":1814},"/topics/ci-cd/","cicd",{"text":1898,"config":1899},"GitOps",{"href":1900,"dataGaName":1901,"dataGaLocation":1814},"/topics/gitops/","gitops",{"text":1903,"config":1904},"DevOps",{"href":1905,"dataGaName":1906,"dataGaLocation":1814},"/topics/devops/","devops",{"text":1908,"config":1909},"Version Control",{"href":1910,"dataGaName":1911,"dataGaLocation":1814},"/topics/version-control/","version control",{"text":1913,"config":1914},"DevSecOps",{"href":1915,"dataGaName":1916,"dataGaLocation":1814},"/topics/devsecops/","devsecops",{"text":1918,"config":1919},"Cloud Native",{"href":1920,"dataGaName":1921,"dataGaLocation":1814},"/topics/cloud-native/","cloud native",{"text":1923,"config":1924},"AI for Coding",{"href":1925,"dataGaName":1926,"dataGaLocation":1814},"/topics/devops/ai-for-coding/","ai for coding",{"text":1928,"config":1929},"Agentic AI",{"href":1930,"dataGaName":1931,"dataGaLocation":1814},"/topics/agentic-ai/","agentic ai",{"title":1933,"links":1934},"Solutions",[1935,1937,1939,1944,1948,1951,1955,1958,1960,1963,1966,1971],{"text":1466,"config":1936},{"href":1461,"dataGaName":1466,"dataGaLocation":1814},{"text":1455,"config":1938},{"href":1438,"dataGaName":1439,"dataGaLocation":1814},{"text":1940,"config":1941},"Agile development",{"href":1942,"dataGaName":1943,"dataGaLocation":1814},"/solutions/agile-delivery/","agile delivery",{"text":1945,"config":1946},"SCM",{"href":1451,"dataGaName":1947,"dataGaLocation":1814},"source code management",{"text":1893,"config":1949},{"href":1444,"dataGaName":1950,"dataGaLocation":1814},"continuous integration & delivery",{"text":1952,"config":1953},"Value stream management",{"href":1494,"dataGaName":1954,"dataGaLocation":1814},"value stream management",{"text":1898,"config":1956},{"href":1957,"dataGaName":1901,"dataGaLocation":1814},"/solutions/gitops/",{"text":1504,"config":1959},{"href":1507,"dataGaName":1508,"dataGaLocation":1814},{"text":1961,"config":1962},"Small business",{"href":1513,"dataGaName":1514,"dataGaLocation":1814},{"text":1964,"config":1965},"Public sector",{"href":1519,"dataGaName":1520,"dataGaLocation":1814},{"text":1967,"config":1968},"Education",{"href":1969,"dataGaName":1970,"dataGaLocation":1814},"/solutions/education/","education",{"text":1972,"config":1973},"Financial services",{"href":1974,"dataGaName":1975,"dataGaLocation":1814},"/solutions/finance/","financial services",{"title":1527,"links":1977},[1978,1980,1982,1984,1987,1989,1992,1994,1996,1998,2000,2002,2004,2006],{"text":1540,"config":1979},{"href":1542,"dataGaName":1543,"dataGaLocation":1814},{"text":1545,"config":1981},{"href":1547,"dataGaName":1548,"dataGaLocation":1814},{"text":1550,"config":1983},{"href":1552,"dataGaName":1553,"dataGaLocation":1814},{"text":1555,"config":1985},{"href":1557,"dataGaName":1986,"dataGaLocation":1814},"docs",{"text":1578,"config":1988},{"href":1580,"dataGaName":1581,"dataGaLocation":1814},{"text":1990,"config":1991},"What's new",{"href":1637,"dataGaName":1638,"dataGaLocation":1814},{"text":1573,"config":1993},{"href":1575,"dataGaName":1576,"dataGaLocation":1814},{"text":1592,"config":1995},{"href":1594,"dataGaName":1595,"dataGaLocation":1814},{"text":1600,"config":1997},{"href":1602,"dataGaName":1603,"dataGaLocation":1814},{"text":1605,"config":1999},{"href":1607,"dataGaName":1294,"dataGaLocation":1814},{"text":1609,"config":2001},{"href":1611,"dataGaName":1612,"dataGaLocation":1814},{"text":1614,"config":2003},{"href":1616,"dataGaName":1617,"dataGaLocation":1814},{"text":1619,"config":2005},{"href":1621,"dataGaName":1622,"dataGaLocation":1814},{"text":1624,"config":2007},{"href":1626,"dataGaName":1627,"dataGaLocation":1814},{"title":1640,"links":2009},[2010,2012,2014,2016,2018,2020,2024,2029,2031,2033,2035],{"text":1648,"config":2011},{"href":1650,"dataGaName":1642,"dataGaLocation":1814},{"text":1653,"config":2013},{"href":1655,"dataGaName":1656,"dataGaLocation":1814},{"text":1661,"config":2015},{"href":1663,"dataGaName":1664,"dataGaLocation":1814},{"text":67,"config":2017},{"href":1667,"dataGaName":1668,"dataGaLocation":1814},{"text":1670,"config":2019},{"href":1672,"dataGaName":1673,"dataGaLocation":1814},{"text":2021,"config":2022},"Sustainability",{"href":2023,"dataGaName":2021,"dataGaLocation":1814},"/sustainability/",{"text":2025,"config":2026},"Diversity, inclusion and belonging (DIB)",{"href":2027,"dataGaName":2028,"dataGaLocation":1814},"/diversity-inclusion-belonging/","Diversity, inclusion and belonging",{"text":1675,"config":2030},{"href":1677,"dataGaName":1678,"dataGaLocation":1814},{"text":1685,"config":2032},{"href":1687,"dataGaName":1688,"dataGaLocation":1814},{"text":1690,"config":2034},{"href":1692,"dataGaName":1693,"dataGaLocation":1814},{"text":2036,"config":2037},"Modern Slavery Transparency Statement",{"href":2038,"dataGaName":2039,"dataGaLocation":1814},"https://handbook.gitlab.com/handbook/legal/modern-slavery-act-transparency-statement/","modern slavery transparency statement",{"items":2041},[2042,2045,2048],{"text":2043,"config":2044},"Terms",{"href":1866,"dataGaName":1867,"dataGaLocation":1814},{"text":2046,"config":2047},"Cookies",{"dataGaName":1876,"dataGaLocation":1814,"id":1877,"isOneTrustButton":511},{"text":2049,"config":2050},"Privacy",{"href":1871,"dataGaName":1872,"dataGaLocation":1814},[2052],{"id":2053,"title":7,"body":1343,"config":2054,"content":2056,"description":1343,"extension":2060,"meta":2061,"navigation":511,"path":2062,"seo":2063,"stem":2064,"__hash__":2065},"blogAuthors/en-us/blog/authors/marcia-ramos.yml",{"template":2055},"BlogAuthor",{"name":7,"config":2057},{"headshot":2058,"ctfId":2059},"https://res.cloudinary.com/about-gitlab-com/image/upload/v1749659488/Blog/Author%20Headshots/gitlab-logo-extra-whitespace.png","Marcia-Ramos","yml",{},"/en-us/blog/authors/marcia-ramos",{},"en-us/blog/authors/marcia-ramos","UrFu-iLS1mEkxVCheaz27cAjfZXeLI9U1n5dGSOHXY4",[2067,2076,2084],{"title":2068,"description":2069,"heroImage":2070,"category":1340,"date":2071,"authors":2072,"slug":2075,"externalUrl":1343},"Confidential AI for GitLab Self-Hosted","Give developers AI coding agents in GitLab Duo without source code leaving a hardware-encrypted boundary — no GPUs needed.","https://res.cloudinary.com/about-gitlab-com/image/upload/v1773866173/vte9qh8rriznvyclhkes.png","2026-08-06",[2073,2074],"Mathias Ewald","Martin Paloncy, Edgeless Systems","confidential-ai-for-gitlab-self-hosted",{"title":2077,"description":2078,"heroImage":2079,"category":1340,"date":2080,"authors":2081,"slug":2083,"externalUrl":1343},"Green DevOps: Why carbon measurement belongs in your CI/CD pipeline","CI/CD pipelines have a hidden carbon cost. Here's why measuring it matters, and how you can get started with Eco CI and Carmen in GitLab.","https://res.cloudinary.com/about-gitlab-com/image/upload/v1765809212/noh0mdfn9o94ry9ykura.png","2026-07-09",[2082],"Lysanne Pinto","green-devops-carbon-measurement-cicd-pipeline",{"title":2085,"description":2086,"heroImage":2087,"category":1340,"date":2088,"authors":2089,"slug":2091,"externalUrl":1343},"How to build CI/CD observability at scale","This practical guide to GitLab pipeline analytics helps self-managed users gain operational insights using Prometheus and Grafana.","https://res.cloudinary.com/about-gitlab-com/image/upload/v1774465167/n5hlvrsrheadeccyr1oz.png","2026-04-28",[2090],"Paul Meresanu","how-to-build-ci-cd-observability-at-scale",{"promotions":2093},[2094,2108,2120,2132],{"id":2095,"categories":2096,"header":2098,"text":2099,"button":2100,"image":2105},"ai-modernization",[2097],"ai","Is AI achieving its promise at scale?","Quiz will take 5 minutes or less",{"text":2101,"config":2102},"Get your AI maturity score",{"href":2103,"dataGaName":2104,"dataGaLocation":1581},"/assessments/ai-modernization-assessment/","modernization assessment",{"config":2106},{"src":2107},"https://res.cloudinary.com/about-gitlab-com/image/upload/v1772138786/qix0m7kwnd8x2fh1zq49.png",{"id":2109,"categories":2110,"header":2112,"text":2099,"button":2113,"image":2117},"devops-modernization",[2111,1916],"product","Are you just managing tools or shipping innovation?",{"text":2114,"config":2115},"Get your DevOps maturity score",{"href":2116,"dataGaName":2104,"dataGaLocation":1581},"/assessments/devops-modernization-assessment/",{"config":2118},{"src":2119},"https://res.cloudinary.com/about-gitlab-com/image/upload/v1772138785/eg818fmakweyuznttgid.png",{"id":2121,"categories":2122,"header":2124,"text":2099,"button":2125,"image":2129},"security-modernization",[2123],"security","Are you trading speed for security?",{"text":2126,"config":2127},"Get your security maturity score",{"href":2128,"dataGaName":2104,"dataGaLocation":1581},"/assessments/security-modernization-assessment/",{"config":2130},{"src":2131},"https://res.cloudinary.com/about-gitlab-com/image/upload/v1772138786/p4pbqd9nnjejg5ds6mdk.png",{"id":2133,"paths":2134,"header":2137,"text":2138,"button":2139,"image":2144},"github-azure-migration",[2135,2136],"migration-from-azure-devops-to-gitlab","integrating-azure-devops-scm-and-gitlab","Is your team ready for GitHub's Azure move?","GitHub is already rebuilding around Azure. Find out what it means for you.",{"text":2140,"config":2141},"See how GitLab compares to GitHub",{"href":2142,"dataGaName":2143,"dataGaLocation":1581},"/compare/gitlab-vs-github/github-azure-migration/","github azure migration",{"config":2145},{"src":2119},{"header":2147,"blurb":2148,"button":2149,"secondaryButton":2154},"Start building faster today","See what your team can do with the intelligent orchestration platform for DevSecOps.\n",{"text":2150,"config":2151},"Get your free trial",{"href":2152,"dataGaName":1380,"dataGaLocation":2153},"https://gitlab.com/-/trial_registrations/new?glm_content=default-saas-trial&glm_source=about.gitlab.com/","feature",{"text":1852,"config":2155},{"href":1704,"dataGaName":1385,"dataGaLocation":2153},1786803753303]