[{"data":1,"prerenderedAt":716},["ShallowReactive",2],{"/en-us/blog/markdown-kramdown-tips-and-tricks/":3,"navigation-en-us":32,"banner-en-us":461,"footer-en-us":478,"Marcia Ramos":688,"next-steps-en-us":701},{"_path":4,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"seo":8,"content":16,"config":22,"_id":25,"_type":26,"title":27,"_source":28,"_file":29,"_stem":30,"_extension":31},"/en-us/blog/markdown-kramdown-tips-and-tricks","blog",false,"",{"title":9,"description":10,"ogTitle":9,"ogDescription":10,"noIndex":6,"ogImage":11,"ogUrl":12,"ogSiteName":13,"ogType":14,"canonicalUrls":12,"schema":15},"Markdown Kramdown Tips and Tricks","Learn how to apply classes to markdown, create ToCs, embed iframes and much more!","https://res.cloudinary.com/about-gitlab-com/image/upload/v1749671850/Blog/Hero%20Images/markdown-kramdown-tips-and-tricks-cover.png","https://about.gitlab.com/blog/markdown-kramdown-tips-and-tricks","https://about.gitlab.com","article","\n                        {\n        \"@context\": \"https://schema.org\",\n        \"@type\": \"Article\",\n        \"headline\": \"Markdown Kramdown Tips and Tricks\",\n        \"author\": [{\"@type\":\"Person\",\"name\":\"Marcia Ramos\"}],\n        \"datePublished\": \"2016-07-19\",\n      }",{"title":9,"description":10,"authors":17,"heroImage":11,"date":19,"body":20,"category":21},[18],"Marcia Ramos","2016-07-19","If you use a markdown engine for writing your website content and you'd like\nto\n\nlearn a few tricks to have more freedom with it, this post is for you.\n\n\nThe markdown engine we use for [about.GitLab.com] is [Kramdown], and that is\nthe one\n\nwe'll be referring to on this post.\n\n\n**Note:** We assume you already know what a markdown engine is and how it is\napplied to a website.\n\n{: .note}\n\n\n\u003C!-- more -->\n\n\n----\n\n\n## On this post\n\n{: .no_toc}\n\n\n- TOC\n\n{:toc}\n\n\n----\n\n\n## Our Markdown Guide\n\n\nLast week a lot of [people were happy][news] for our [Handbook] being open\nsource, as we explained\n\nin details on the post \"[Our Handbook is open source: here's\nwhy][handbook-post]\".\n\nEvery GitLab Team member does touch our website, starting on his or her\nfirst weeks,\n\nas part of the onboarding tasks.\n\nDoesn't matter if he or she is an advanced programmer or never have seen an\nHTML code before,\n\ncollaborating is the key for making sure we are all on the same side. And we\nlove it!\n\n\nOne of our Handbook pages is a full [Markdown Guide][guide] for the markup\n\nthat we use in our website, generated by [Middleman].\n\nIt brings a lot of details on how to use Kramdown for writing content.\n\nEvery markdown page of this website, which is an [open\n\nsource project][www-GitLab-com] available for peeking and contributing, can\nuse any\n\nof the rules explained there. This April we changed the markdown engine from\nRDiscount to\n\nKramdown, and not everybody in our Team knew the new \"magical\" stuff we\ncould use from this change. That's\n\nwhy we decided that writing a guide would be useful for those already used\nto markdown, and\n\nhelpful for those completely new to it.\n\n\n## Why Kramdown\n\n\nPerhaps your first question will be something like \"okay, why is Kramdown so\nspecial?\". My first\n\nexperience with markdown was when I first used a [Static Site\nGenerator][SSGs], Jekyll. Coming from\n\nprevious experiences in web development on PHP and HTML, the first thing I\nwanted to do to a\n\nmarkdown post was adding a class to a particular heading. When I googled for\nthat, I was pretty\n\ndisappointed because apparently we aren't supposed to apply classes inline\ninto markdown files.\n\nSo, I had to experiment a lot until I got the desired result: add some color\nto my heading.\n\n\nAfter trying a lot of new tweaks, and digging through the web for answers\nthat insisted on not coming, I finally\n\nfound out that with Kramdown, yes, I could do a lot of things. And finally I\ncould apply some inline classes\n\nthrough my posts and have my blue headings when I wanted them blue. But at\nthat time, I hadn't noticed\n\nthat we could do some really great magic with it, and that's what I'm\nsharing with you in this post.\n\n\n## The magic\n\n\nWe could say that the Kramdown magic concentrates to the following syntax:\n`{: something}`.\n\nThis little devil is the basis of a lot of awesome resources.\n\n\nLet's go over a few of them now, but you'll find a lot more in our [Markdown\nGuide][guide].\n\n\n## Classes, IDs and Attributes\n\n\n{::options parse_block_html=\"true\" /}\n\n\nLet's start with something classic, as the ability of [applying CSS classes,\ncustom IDs, and custom\n\nattributes][classes] to the elements.\n\n\n### Applying classes\n\n\nIf you think of any CSS class, what comes into your mind first? I suppose\nit's something like:\n\n\n```css\n\n.blue {\n  color: blue;\n}\n\n```\n\n\nOkay, we have a `.blue` class. Let's say once in a while we want a blue\nparagraph or a blue heading. Just do:\n\n\n```md\n\nThis is a paragraph that for some reason we want blue.\n\n{: .blue}\n\n```\n\n\nAnd of course, the output will be:\n\n\n\u003Cdiv class=\"panel panel-info\">\n\n**Output**\n\n{: .panel-heading}\n\n\u003Cdiv class=\"panel-body\">\n\nThis is a paragraph that for some reason we want blue.\n\n{: .blue}\n\n\u003C/div>\n\n\u003C/div>\n\n\nAnd if we want a blue heading, we do exact the same thing:\n\n\n```md\n\n#### A blue heading\n\n{: .blue}\n\n```\n\n\nAnd the output is going to behave as we expect it to:\n\n\n\u003Cdiv class=\"panel panel-info\">\n\n**Output**\n\n{: .panel-heading style=\"margin-bottom:10px\"}\n\n\u003Cdiv class=\"panel-body\">\n\n#### A blue heading\n\n{: .blue .no_toc}\n\n\u003C/div>\n\n\u003C/div>\n\n\nWhat if I want to apply two classes at the same time?\n\n\n```md\n\nA blue and bold paragraph.\n\n{: .blue .bold}\n\n```\n\n\nAnd the output will be as expected:\n\n\n\u003Cdiv class=\"panel panel-info\">\n\n**Output**\n\n{: .panel-heading style=\"margin-bottom:10px\"}\n\n\u003Cdiv class=\"panel-body\">\n\nA blue and bold paragraph.\n\n{: .blue .bold}\n\n\u003C/div>\n\n\u003C/div>\n\n\nAs simple as that! The markup is simple and intuitive.\n\n\nNow, guess what, we can do exactly the same for IDs!\n\n\n### Custom IDs\n\n\nKramdown itself will append an ID for each heading, automatically. The ID\nwill be all the words\n\nin the heading together, connected by dashes. For the example above, \"A blue\nheading\", the HTML output ID\n\nwill be `a-blue-heading`:\n\n\n```html\n\n\u003Ch4 class=\"blue\" id=\"a-blue-heading\">A blue heading\u003C/h4>\n\n```\n\n\nLet's say we want the ID called `blue-h`:\n\n\n```md\n\n#### A blue heading\n\n{: .blue #blue-h}\n\n```\n\n\nWill produce exactly what it's meant to (a blue heading with the custom ID):\n\n\n```html\n\n\u003Ch4 class=\"blue\" id=\"blue-h\">A blue heading\u003C/h4>\n\n```\n\n\nSo, the output would be:\n\n\n\u003Cdiv class=\"panel panel-info\">\n\n**Output**\n\n{: .panel-heading style=\"margin-bottom:10px\"}\n\n\u003Cdiv class=\"panel-body\">\n\n#### A blue heading\n\n{: .blue .no_toc #blue-h}\n\n\u003C/div>\n\n\u003C/div>\n\n\nNote that we can attribute both class and ID in one markup, as in `{: .class\n#custom-id}`. But we can use\n\njust one of them too: `{: .class}` or `{: #custom-id}`.\n\n{: .alert .alert-warning}\n\n\nInteresting, isn't it?\n\n\n### Custom Attributes\n\n\nYes, we can go even further and apply any _key/value_ pair we need:\n\n\n```md\n\nAn example of key/value pair\n\n{: .class #id key=\"value\"}\n\n```\n\n\nWe can use them, for example, for quickly applying general styles:\n\n\n```\n\n#### A simple example\n\n{: #custom-id style=\"margin-top:0\"}\n\n```\n\n\nBut they are specially useful for links, as in:\n\n\n```md\n\n[text][identifier]{: #custom-id key=\"value\"}\n\n```\n\n\nThis way we can call a JavaScript function, for example:\n\n\n```md\n\n[CLICK ME][identifier]{: #custom-id onclick=\"myJsFunc();\"}\n\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\n```\n\n\n\u003Cdiv class=\"panel panel-info\">\n\n**Output**\n\n{: .panel-heading}\n\n\u003Cdiv class=\"panel-body\">\n\n[CLICK ME][identifier]{: #custom-id onclick=\"myJsFunc();\"}\n\n\n\u003Cscript type=\"text/javascript\">\n\nfunction myJsFunc() {\n\nvar answer = confirm (\"Please click on OK to continue.\")\n\nif (answer)\n\nwindow.location=\"#\";\n\n}\n\n\u003C/script>\n\n\u003C/div>\n\n\u003C/div>\n\n\n----\n\n\n## Table of Contents (ToC)\n\n\nA ToC is so awesome and easy to produce. Have you noticed [our\nToC](#on-this-post)\n\non this post? It's generated automatically by Kramdown with this simple\nmarkup:\n\n\n```md\n\n- TOC\n\n{:toc}\n\n```\n\n\nAll the file headings will be all automatically included in the ToC, except\nfor those we don't want there.\n\nFor these, we apply a class called `no_toc`, and Kramdown will respect our\nwill:\n\n\n```md\n\n#### This heading will not be included in the ToC.\n\n{: .no_toc}\n\n```\n\n\nAnd of course, we can make the ToC an ordered list instead of unordered:\n\n\n```md\n\n1. TOC\n\n{:toc}\n\n```\n\n\nAwesome, isn't it?\n\n\n----\n\n\n## HTML Blocks\n\n\nWhenever we need HTML blocks, we can use them freely!\n\n\n```html\n\n\u003Cdiv>\n  \u003Cp>Hello World\u003C/p>\n\u003C/div>\n\n```\n\n\nIn our [Marketing Handbook] you will find plenty of them.\n\n\n### Font Awesome\n\n\n[Font Awesome] is a good use-case for HTML blocks within markdown files.\n\n\nCheck this!\n\n\n```html\n\nWe \u003Ci class=\"fas fa-heart\" aria-hidden=\"true\" style=\"color:#c7254e\">\u003C/i>\nGitLab!\n\n```\n\n\n\u003Cdiv class=\"panel panel-info\">\n\n**Output**\n\n{: .panel-heading style=\"margin-bottom:10px\"}\n\n\u003Cdiv class=\"panel-body\">\n\nWe \u003Ci class=\"fas fa-heart\" aria-hidden=\"true\" style=\"color:#c7254e\">\u003C/i>\nGitLab!\n\n\u003C/div>\n\n\u003C/div>\n\n\n### Iframes\n\n\nWe can embed anything within `\u003Ciframe>` tags, such as [YouTube and Vimeo\nvideos][videos],\n\nGoogle and OneDrive [documents][docs] and anything else available in\niframes:\n\n\n```html\n\n\u003Cfigure class=\"video_container\">\n  \u003Ciframe src=\"https://www.youtube.com/embed/NoFLJLJ7abE\" frameborder=\"0\" allowfullscreen=\"true\"> \u003C/iframe>\n\u003C/figure>\n\n```\n\n\nWe are using the class `video_container` to make it [responsive].\n\n\n\u003Cdiv class=\"panel panel-info\">\n\n**Output**\n\n{: .panel-heading style=\"margin-bottom:10px\"}\n\n\u003Cdiv class=\"panel-body\">\n\n\u003Cfigure class=\"video_container\">\n\n\u003Ciframe src=\"https://www.youtube.com/embed/NoFLJLJ7abE\" frameborder=\"0\"\nallowfullscreen=\"true\"> \u003C/iframe>\n\n\u003C/figure>\n\n\u003C/div>\n\n\u003C/div>\n\n\n### CodePen\n\n\n[CodePens] are really good for some cases, when you want to display codes\nand results, for example. Check this cute dog,\n\ncreated with HTML and Sass:\n\n\n```html\n\n\u003Cp data-height=\"431\" data-theme-id=\"dark\" data-slug-hash=\"OXzjLL\"\ndata-default-tab=\"html,result\" data-user=\"virtuacreative\"\ndata-embed-version=\"2\" class=\"codepen\">See the Pen \u003Ca\nhref=\"http://codepen.io/virtuacreative/pen/OXzjLL/\">Dog\u003C/a> by Virtua\nCreative (\u003Ca href=\"http://codepen.io/virtuacreative\">@virtuacreative\u003C/a>) on\n\u003Ca href=\"http://codepen.io\">CodePen\u003C/a>.\u003C/p>\n\n\u003Cscript async src=\"//assets.codepen.io/assets/embed/ei.js\">\u003C/script>\n\n```\n\n\n\u003Cp data-height=\"431\" data-theme-id=\"dark\" data-slug-hash=\"OXzjLL\"\ndata-default-tab=\"html,result\" data-user=\"virtuacreative\"\ndata-embed-version=\"2\" class=\"codepen\">See the Pen \u003Ca\nhref=\"http://codepen.io/virtuacreative/pen/OXzjLL/\">Dog\u003C/a> by Virtua\nCreative (\u003Ca href=\"http://codepen.io/virtuacreative\">@virtuacreative\u003C/a>) on\n\u003Ca href=\"http://codepen.io\">CodePen\u003C/a>.\u003C/p>\n\n\u003Cscript async src=\"//assets.codepen.io/assets/embed/ei.js\">\u003C/script>\n\n\n----\n\n\n## Mix HTML with Markdown\n\n\nYes, we definitely can do this! We need to add the following markup to the\nmarkdown document before mixing up\n\nHTML and markdown:\n\n\n```md\n\n{::options parse_block_html=\"true\" /}\n\n```\n\n\nAnd we can close it any time, if necessary:\n\n\n```md\n\n{::options parse_block_html=\"false\" /}\n\n```\n\n\nThis is going to make this:\n\n\n```html\n\nSomething in **markdown**.\n\n\n\u003Cp>Then an HTML tag with crazy **markup**!\u003C/p>\n\n```\n\n\nTo be displayed like this:\n\n\n\u003Cdiv class=\"panel panel-info\">\n\n**Output**\n\n{: .panel-heading style=\"margin-bottom:10px\"}\n\n\u003Cdiv class=\"panel-body\">\n\nSomething in **markdown**.\n\n\u003Cp>Then an HTML tag with crazy **markup**!\u003C/p>\n\n\u003C/div>\n\n\u003C/div>\n\n\nBlue boxes, like this one above, used to [display the outputs][boxes] on\nthis post, were generated with this resource.\n\n\n----\n\n\n## Styles\n\n\nOne of the most useful features is the ability to add `\u003Cstyle>` tags to our\nmarkdown file too!\n\nWe can do that for simply styling our web page without affecting the entire\nsite. Just go on and add the\n\ntag to any part of your markdown:\n\n\n```html\n\n\u003Cstyle>\n\n.blue {\n  color: blue;\n}\n\n.bold {\n  font-weight: bold;\n}\n\n\u003C/style>\n\n```\n\n\nThis tag was applied to this very document to exemplify this case, also to\nhelp with the classes described\n\n[earlier in this post](#applying-classes).\n\n\n----\n\n\n## Conclusion\n\n\nThere is a lot more you can do, mix, and bring together using [Kramdown].\nIt's awesome! Check out\n\nour [Markdown Guide][guide] for more resources, examples and applications\nand use your creativity to create\n\nbeautiful posts, with great styles!\n\n\nAnything else you know of and is not in our [Guide]? Any new magic?\n\nAny trick? Please [contribute] by submitting an [MR] to the\n\n[source file]. Your collaboration is much appreciated.\n\n\nHappy markdowning!\n\n\nFollow [@GitLab] and stay tunned for the next post!\n\n\n\u003C!-- identifiers -->\n\n\n[about.GitLab.com]: /\n\n[@GitLab]: https://twitter.com/GitLab\n\n[boxes]: https://handbook.gitlab.com/docs/markdown-guide/\n\n[classes]: https://handbook.gitlab.com/docs/markdown-guide/\n\n[CodePens]: https://codepen.io\n\n[contribute]:\nhttps://gitlab.com/gitlab-com/www-gitlab-com/blob/master/CONTRIBUTING.md\n\n[docs]: https://handbook.gitlab.com/docs/markdown-guide/#embed-documents\n\n[font awesome]: http://fontawesome.io/\n\n[guide]: https://handbook.gitlab.com/docs/markdown-guide/\n\n[Handbook]: https://handbook.gitlab.com/\n\n[handbook-post]: /blog/our-handbook-is-open-source-heres-why/\n\n[identifier]: #\n\n[Kramdown]: http://kramdown.gettalong.org/\n\n[Marketing Handbook]: https://handbook.gitlab.com/handbook/marketing/\n\n[Middleman]: https://middlemanapp.com/\n\n[mr]:\nhttps://docs.gitlab.com/ee/user/project/merge_requests/creating_merge_requests.html\n\"Merge Request\"\n\n[news]: https://news.ycombinator.com/item?id=12091638\n\n[responsive]:\nhttps://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php\n\n[SSGs]: /blog/ssg-overview-gitlab-pages-part-2/\n\n[videos]: https://handbook.gitlab.com/docs/markdown-guide/#videos\n\n[www-GitLab-com]: https://gitlab.com/gitlab-com/www-gitlab-com\n\n[source file]:\nhttps://gitlab.com/gitlab-com/www-gitlab-com/blob/master/source/handbook/markdown-guide/index.html.md\n\n\n\u003Cstyle>\n\n.blue {\n  color: blue !important;\n}\n\n.bold {\n  font-weight: bold;\n}\n\n\u003C/style>\n","engineering",{"slug":23,"featured":6,"template":24},"markdown-kramdown-tips-and-tricks","BlogPost","content:en-us:blog:markdown-kramdown-tips-and-tricks.yml","yaml","Markdown Kramdown Tips And Tricks","content","en-us/blog/markdown-kramdown-tips-and-tricks.yml","en-us/blog/markdown-kramdown-tips-and-tricks","yml",{"_path":33,"_dir":34,"_draft":6,"_partial":6,"_locale":7,"data":35,"_id":457,"_type":26,"title":458,"_source":28,"_file":459,"_stem":460,"_extension":31},"/shared/en-us/main-navigation","en-us",{"logo":36,"freeTrial":41,"sales":46,"login":51,"items":56,"search":388,"minimal":419,"duo":438,"pricingDeployment":447},{"config":37},{"href":38,"dataGaName":39,"dataGaLocation":40},"/","gitlab logo","header",{"text":42,"config":43},"Get free trial",{"href":44,"dataGaName":45,"dataGaLocation":40},"https://gitlab.com/-/trial_registrations/new?glm_source=about.gitlab.com&glm_content=default-saas-trial/","free trial",{"text":47,"config":48},"Talk to sales",{"href":49,"dataGaName":50,"dataGaLocation":40},"/sales/","sales",{"text":52,"config":53},"Sign in",{"href":54,"dataGaName":55,"dataGaLocation":40},"https://gitlab.com/users/sign_in/","sign in",[57,101,199,204,309,369],{"text":58,"config":59,"cards":61,"footer":84},"Platform",{"dataNavLevelOne":60},"platform",[62,68,76],{"title":58,"description":63,"link":64},"The most comprehensive AI-powered DevSecOps Platform",{"text":65,"config":66},"Explore our Platform",{"href":67,"dataGaName":60,"dataGaLocation":40},"/platform/",{"title":69,"description":70,"link":71},"GitLab Duo (AI)","Build software faster with AI at every stage of development",{"text":72,"config":73},"Meet GitLab Duo",{"href":74,"dataGaName":75,"dataGaLocation":40},"/gitlab-duo/","gitlab duo ai",{"title":77,"description":78,"link":79},"Why GitLab","10 reasons why Enterprises choose GitLab",{"text":80,"config":81},"Learn more",{"href":82,"dataGaName":83,"dataGaLocation":40},"/why-gitlab/","why gitlab",{"title":85,"items":86},"Get started with",[87,92,97],{"text":88,"config":89},"Platform Engineering",{"href":90,"dataGaName":91,"dataGaLocation":40},"/solutions/platform-engineering/","platform engineering",{"text":93,"config":94},"Developer Experience",{"href":95,"dataGaName":96,"dataGaLocation":40},"/developer-experience/","Developer experience",{"text":98,"config":99},"MLOps",{"href":100,"dataGaName":98,"dataGaLocation":40},"/topics/devops/the-role-of-ai-in-devops/",{"text":102,"left":103,"config":104,"link":106,"lists":110,"footer":181},"Product",true,{"dataNavLevelOne":105},"solutions",{"text":107,"config":108},"View all Solutions",{"href":109,"dataGaName":105,"dataGaLocation":40},"/solutions/",[111,136,160],{"title":112,"description":113,"link":114,"items":119},"Automation","CI/CD and automation to accelerate deployment",{"config":115},{"icon":116,"href":117,"dataGaName":118,"dataGaLocation":40},"AutomatedCodeAlt","/solutions/delivery-automation/","automated software delivery",[120,124,128,132],{"text":121,"config":122},"CI/CD",{"href":123,"dataGaLocation":40,"dataGaName":121},"/solutions/continuous-integration/",{"text":125,"config":126},"AI-Assisted Development",{"href":74,"dataGaLocation":40,"dataGaName":127},"AI assisted development",{"text":129,"config":130},"Source Code Management",{"href":131,"dataGaLocation":40,"dataGaName":129},"/solutions/source-code-management/",{"text":133,"config":134},"Automated Software Delivery",{"href":117,"dataGaLocation":40,"dataGaName":135},"Automated software delivery",{"title":137,"description":138,"link":139,"items":144},"Security","Deliver code faster without compromising security",{"config":140},{"href":141,"dataGaName":142,"dataGaLocation":40,"icon":143},"/solutions/security-compliance/","security and compliance","ShieldCheckLight",[145,150,155],{"text":146,"config":147},"Application Security Testing",{"href":148,"dataGaName":149,"dataGaLocation":40},"/solutions/application-security-testing/","Application security testing",{"text":151,"config":152},"Software Supply Chain Security",{"href":153,"dataGaLocation":40,"dataGaName":154},"/solutions/supply-chain/","Software supply chain security",{"text":156,"config":157},"Software Compliance",{"href":158,"dataGaName":159,"dataGaLocation":40},"/solutions/software-compliance/","software compliance",{"title":161,"link":162,"items":167},"Measurement",{"config":163},{"icon":164,"href":165,"dataGaName":166,"dataGaLocation":40},"DigitalTransformation","/solutions/visibility-measurement/","visibility and measurement",[168,172,176],{"text":169,"config":170},"Visibility & Measurement",{"href":165,"dataGaLocation":40,"dataGaName":171},"Visibility and Measurement",{"text":173,"config":174},"Value Stream Management",{"href":175,"dataGaLocation":40,"dataGaName":173},"/solutions/value-stream-management/",{"text":177,"config":178},"Analytics & Insights",{"href":179,"dataGaLocation":40,"dataGaName":180},"/solutions/analytics-and-insights/","Analytics and insights",{"title":182,"items":183},"GitLab for",[184,189,194],{"text":185,"config":186},"Enterprise",{"href":187,"dataGaLocation":40,"dataGaName":188},"/enterprise/","enterprise",{"text":190,"config":191},"Small Business",{"href":192,"dataGaLocation":40,"dataGaName":193},"/small-business/","small business",{"text":195,"config":196},"Public Sector",{"href":197,"dataGaLocation":40,"dataGaName":198},"/solutions/public-sector/","public sector",{"text":200,"config":201},"Pricing",{"href":202,"dataGaName":203,"dataGaLocation":40,"dataNavLevelOne":203},"/pricing/","pricing",{"text":205,"config":206,"link":208,"lists":212,"feature":296},"Resources",{"dataNavLevelOne":207},"resources",{"text":209,"config":210},"View all resources",{"href":211,"dataGaName":207,"dataGaLocation":40},"/resources/",[213,246,268],{"title":214,"items":215},"Getting started",[216,221,226,231,236,241],{"text":217,"config":218},"Install",{"href":219,"dataGaName":220,"dataGaLocation":40},"/install/","install",{"text":222,"config":223},"Quick start guides",{"href":224,"dataGaName":225,"dataGaLocation":40},"/get-started/","quick setup checklists",{"text":227,"config":228},"Learn",{"href":229,"dataGaLocation":40,"dataGaName":230},"https://university.gitlab.com/","learn",{"text":232,"config":233},"Product documentation",{"href":234,"dataGaName":235,"dataGaLocation":40},"https://docs.gitlab.com/","product documentation",{"text":237,"config":238},"Best practice videos",{"href":239,"dataGaName":240,"dataGaLocation":40},"/getting-started-videos/","best practice videos",{"text":242,"config":243},"Integrations",{"href":244,"dataGaName":245,"dataGaLocation":40},"/integrations/","integrations",{"title":247,"items":248},"Discover",[249,254,258,263],{"text":250,"config":251},"Customer success stories",{"href":252,"dataGaName":253,"dataGaLocation":40},"/customers/","customer success stories",{"text":255,"config":256},"Blog",{"href":257,"dataGaName":5,"dataGaLocation":40},"/blog/",{"text":259,"config":260},"Remote",{"href":261,"dataGaName":262,"dataGaLocation":40},"https://handbook.gitlab.com/handbook/company/culture/all-remote/","remote",{"text":264,"config":265},"TeamOps",{"href":266,"dataGaName":267,"dataGaLocation":40},"/teamops/","teamops",{"title":269,"items":270},"Connect",[271,276,281,286,291],{"text":272,"config":273},"GitLab Services",{"href":274,"dataGaName":275,"dataGaLocation":40},"/services/","services",{"text":277,"config":278},"Community",{"href":279,"dataGaName":280,"dataGaLocation":40},"/community/","community",{"text":282,"config":283},"Forum",{"href":284,"dataGaName":285,"dataGaLocation":40},"https://forum.gitlab.com/","forum",{"text":287,"config":288},"Events",{"href":289,"dataGaName":290,"dataGaLocation":40},"/events/","events",{"text":292,"config":293},"Partners",{"href":294,"dataGaName":295,"dataGaLocation":40},"/partners/","partners",{"backgroundColor":297,"textColor":298,"text":299,"image":300,"link":304},"#2f2a6b","#fff","Insights for the future of software development",{"altText":301,"config":302},"the source promo card",{"src":303},"https://res.cloudinary.com/about-gitlab-com/image/upload/v1758208064/dzl0dbift9xdizyelkk4.svg",{"text":305,"config":306},"Read the latest",{"href":307,"dataGaName":308,"dataGaLocation":40},"/the-source/","the source",{"text":310,"config":311,"lists":313},"Company",{"dataNavLevelOne":312},"company",[314],{"items":315},[316,321,327,329,334,339,344,349,354,359,364],{"text":317,"config":318},"About",{"href":319,"dataGaName":320,"dataGaLocation":40},"/company/","about",{"text":322,"config":323,"footerGa":326},"Jobs",{"href":324,"dataGaName":325,"dataGaLocation":40},"/jobs/","jobs",{"dataGaName":325},{"text":287,"config":328},{"href":289,"dataGaName":290,"dataGaLocation":40},{"text":330,"config":331},"Leadership",{"href":332,"dataGaName":333,"dataGaLocation":40},"/company/team/e-group/","leadership",{"text":335,"config":336},"Team",{"href":337,"dataGaName":338,"dataGaLocation":40},"/company/team/","team",{"text":340,"config":341},"Handbook",{"href":342,"dataGaName":343,"dataGaLocation":40},"https://handbook.gitlab.com/","handbook",{"text":345,"config":346},"Investor relations",{"href":347,"dataGaName":348,"dataGaLocation":40},"https://ir.gitlab.com/","investor relations",{"text":350,"config":351},"Trust Center",{"href":352,"dataGaName":353,"dataGaLocation":40},"/security/","trust center",{"text":355,"config":356},"AI Transparency Center",{"href":357,"dataGaName":358,"dataGaLocation":40},"/ai-transparency-center/","ai transparency center",{"text":360,"config":361},"Newsletter",{"href":362,"dataGaName":363,"dataGaLocation":40},"/company/contact/","newsletter",{"text":365,"config":366},"Press",{"href":367,"dataGaName":368,"dataGaLocation":40},"/press/","press",{"text":370,"config":371,"lists":372},"Contact us",{"dataNavLevelOne":312},[373],{"items":374},[375,378,383],{"text":47,"config":376},{"href":49,"dataGaName":377,"dataGaLocation":40},"talk to sales",{"text":379,"config":380},"Get help",{"href":381,"dataGaName":382,"dataGaLocation":40},"/support/","get help",{"text":384,"config":385},"Customer portal",{"href":386,"dataGaName":387,"dataGaLocation":40},"https://customers.gitlab.com/customers/sign_in/","customer portal",{"close":389,"login":390,"suggestions":397},"Close",{"text":391,"link":392},"To search repositories and projects, login to",{"text":393,"config":394},"gitlab.com",{"href":54,"dataGaName":395,"dataGaLocation":396},"search login","search",{"text":398,"default":399},"Suggestions",[400,402,406,408,412,416],{"text":69,"config":401},{"href":74,"dataGaName":69,"dataGaLocation":396},{"text":403,"config":404},"Code Suggestions (AI)",{"href":405,"dataGaName":403,"dataGaLocation":396},"/solutions/code-suggestions/",{"text":121,"config":407},{"href":123,"dataGaName":121,"dataGaLocation":396},{"text":409,"config":410},"GitLab on AWS",{"href":411,"dataGaName":409,"dataGaLocation":396},"/partners/technology-partners/aws/",{"text":413,"config":414},"GitLab on Google Cloud",{"href":415,"dataGaName":413,"dataGaLocation":396},"/partners/technology-partners/google-cloud-platform/",{"text":417,"config":418},"Why GitLab?",{"href":82,"dataGaName":417,"dataGaLocation":396},{"freeTrial":420,"mobileIcon":425,"desktopIcon":430,"secondaryButton":433},{"text":421,"config":422},"Start free trial",{"href":423,"dataGaName":45,"dataGaLocation":424},"https://gitlab.com/-/trials/new/","nav",{"altText":426,"config":427},"Gitlab Icon",{"src":428,"dataGaName":429,"dataGaLocation":424},"https://res.cloudinary.com/about-gitlab-com/image/upload/v1758203874/jypbw1jx72aexsoohd7x.svg","gitlab icon",{"altText":426,"config":431},{"src":432,"dataGaName":429,"dataGaLocation":424},"https://res.cloudinary.com/about-gitlab-com/image/upload/v1758203875/gs4c8p8opsgvflgkswz9.svg",{"text":434,"config":435},"Get Started",{"href":436,"dataGaName":437,"dataGaLocation":424},"https://gitlab.com/-/trial_registrations/new?glm_source=about.gitlab.com/compare/gitlab-vs-github/","get started",{"freeTrial":439,"mobileIcon":443,"desktopIcon":445},{"text":440,"config":441},"Learn more about GitLab Duo",{"href":74,"dataGaName":442,"dataGaLocation":424},"gitlab duo",{"altText":426,"config":444},{"src":428,"dataGaName":429,"dataGaLocation":424},{"altText":426,"config":446},{"src":432,"dataGaName":429,"dataGaLocation":424},{"freeTrial":448,"mobileIcon":453,"desktopIcon":455},{"text":449,"config":450},"Back to pricing",{"href":202,"dataGaName":451,"dataGaLocation":424,"icon":452},"back to pricing","GoBack",{"altText":426,"config":454},{"src":428,"dataGaName":429,"dataGaLocation":424},{"altText":426,"config":456},{"src":432,"dataGaName":429,"dataGaLocation":424},"content:shared:en-us:main-navigation.yml","Main Navigation","shared/en-us/main-navigation.yml","shared/en-us/main-navigation",{"_path":462,"_dir":34,"_draft":6,"_partial":6,"_locale":7,"title":463,"button":464,"image":469,"config":473,"_id":475,"_type":26,"_source":28,"_file":476,"_stem":477,"_extension":31},"/shared/en-us/banner","is now in public beta!",{"text":465,"config":466},"Try the Beta",{"href":467,"dataGaName":468,"dataGaLocation":40},"/gitlab-duo/agent-platform/","duo banner",{"altText":470,"config":471},"GitLab Duo Agent Platform",{"src":472},"https://res.cloudinary.com/about-gitlab-com/image/upload/v1753720689/somrf9zaunk0xlt7ne4x.svg",{"layout":474},"release","content:shared:en-us:banner.yml","shared/en-us/banner.yml","shared/en-us/banner",{"_path":479,"_dir":34,"_draft":6,"_partial":6,"_locale":7,"data":480,"_id":684,"_type":26,"title":685,"_source":28,"_file":686,"_stem":687,"_extension":31},"/shared/en-us/main-footer",{"text":481,"source":482,"edit":488,"contribute":493,"config":498,"items":503,"minimal":676},"Git is a trademark of Software Freedom Conservancy and our use of 'GitLab' is under license",{"text":483,"config":484},"View page source",{"href":485,"dataGaName":486,"dataGaLocation":487},"https://gitlab.com/gitlab-com/marketing/digital-experience/about-gitlab-com/","page source","footer",{"text":489,"config":490},"Edit this page",{"href":491,"dataGaName":492,"dataGaLocation":487},"https://gitlab.com/gitlab-com/marketing/digital-experience/about-gitlab-com/-/blob/main/content/","web ide",{"text":494,"config":495},"Please contribute",{"href":496,"dataGaName":497,"dataGaLocation":487},"https://gitlab.com/gitlab-com/marketing/digital-experience/about-gitlab-com/-/blob/main/CONTRIBUTING.md/","please contribute",{"twitter":499,"facebook":500,"youtube":501,"linkedin":502},"https://twitter.com/gitlab","https://www.facebook.com/gitlab","https://www.youtube.com/channel/UCnMGQ8QHMAnVIsI3xJrihhg","https://www.linkedin.com/company/gitlab-com",[504,527,583,612,646],{"title":58,"links":505,"subMenu":510},[506],{"text":507,"config":508},"DevSecOps platform",{"href":67,"dataGaName":509,"dataGaLocation":487},"devsecops platform",[511],{"title":200,"links":512},[513,517,522],{"text":514,"config":515},"View plans",{"href":202,"dataGaName":516,"dataGaLocation":487},"view plans",{"text":518,"config":519},"Why Premium?",{"href":520,"dataGaName":521,"dataGaLocation":487},"/pricing/premium/","why premium",{"text":523,"config":524},"Why Ultimate?",{"href":525,"dataGaName":526,"dataGaLocation":487},"/pricing/ultimate/","why ultimate",{"title":528,"links":529},"Solutions",[530,535,537,539,544,549,553,556,560,565,567,570,573,578],{"text":531,"config":532},"Digital transformation",{"href":533,"dataGaName":534,"dataGaLocation":487},"/topics/digital-transformation/","digital transformation",{"text":146,"config":536},{"href":148,"dataGaName":146,"dataGaLocation":487},{"text":135,"config":538},{"href":117,"dataGaName":118,"dataGaLocation":487},{"text":540,"config":541},"Agile development",{"href":542,"dataGaName":543,"dataGaLocation":487},"/solutions/agile-delivery/","agile delivery",{"text":545,"config":546},"Cloud transformation",{"href":547,"dataGaName":548,"dataGaLocation":487},"/topics/cloud-native/","cloud transformation",{"text":550,"config":551},"SCM",{"href":131,"dataGaName":552,"dataGaLocation":487},"source code management",{"text":121,"config":554},{"href":123,"dataGaName":555,"dataGaLocation":487},"continuous integration & delivery",{"text":557,"config":558},"Value stream management",{"href":175,"dataGaName":559,"dataGaLocation":487},"value stream management",{"text":561,"config":562},"GitOps",{"href":563,"dataGaName":564,"dataGaLocation":487},"/solutions/gitops/","gitops",{"text":185,"config":566},{"href":187,"dataGaName":188,"dataGaLocation":487},{"text":568,"config":569},"Small business",{"href":192,"dataGaName":193,"dataGaLocation":487},{"text":571,"config":572},"Public sector",{"href":197,"dataGaName":198,"dataGaLocation":487},{"text":574,"config":575},"Education",{"href":576,"dataGaName":577,"dataGaLocation":487},"/solutions/education/","education",{"text":579,"config":580},"Financial services",{"href":581,"dataGaName":582,"dataGaLocation":487},"/solutions/finance/","financial services",{"title":205,"links":584},[585,587,589,591,594,596,598,600,602,604,606,608,610],{"text":217,"config":586},{"href":219,"dataGaName":220,"dataGaLocation":487},{"text":222,"config":588},{"href":224,"dataGaName":225,"dataGaLocation":487},{"text":227,"config":590},{"href":229,"dataGaName":230,"dataGaLocation":487},{"text":232,"config":592},{"href":234,"dataGaName":593,"dataGaLocation":487},"docs",{"text":255,"config":595},{"href":257,"dataGaName":5,"dataGaLocation":487},{"text":250,"config":597},{"href":252,"dataGaName":253,"dataGaLocation":487},{"text":259,"config":599},{"href":261,"dataGaName":262,"dataGaLocation":487},{"text":272,"config":601},{"href":274,"dataGaName":275,"dataGaLocation":487},{"text":264,"config":603},{"href":266,"dataGaName":267,"dataGaLocation":487},{"text":277,"config":605},{"href":279,"dataGaName":280,"dataGaLocation":487},{"text":282,"config":607},{"href":284,"dataGaName":285,"dataGaLocation":487},{"text":287,"config":609},{"href":289,"dataGaName":290,"dataGaLocation":487},{"text":292,"config":611},{"href":294,"dataGaName":295,"dataGaLocation":487},{"title":310,"links":613},[614,616,618,620,622,624,626,630,635,637,639,641],{"text":317,"config":615},{"href":319,"dataGaName":312,"dataGaLocation":487},{"text":322,"config":617},{"href":324,"dataGaName":325,"dataGaLocation":487},{"text":330,"config":619},{"href":332,"dataGaName":333,"dataGaLocation":487},{"text":335,"config":621},{"href":337,"dataGaName":338,"dataGaLocation":487},{"text":340,"config":623},{"href":342,"dataGaName":343,"dataGaLocation":487},{"text":345,"config":625},{"href":347,"dataGaName":348,"dataGaLocation":487},{"text":627,"config":628},"Sustainability",{"href":629,"dataGaName":627,"dataGaLocation":487},"/sustainability/",{"text":631,"config":632},"Diversity, inclusion and belonging (DIB)",{"href":633,"dataGaName":634,"dataGaLocation":487},"/diversity-inclusion-belonging/","Diversity, inclusion and belonging",{"text":350,"config":636},{"href":352,"dataGaName":353,"dataGaLocation":487},{"text":360,"config":638},{"href":362,"dataGaName":363,"dataGaLocation":487},{"text":365,"config":640},{"href":367,"dataGaName":368,"dataGaLocation":487},{"text":642,"config":643},"Modern Slavery Transparency Statement",{"href":644,"dataGaName":645,"dataGaLocation":487},"https://handbook.gitlab.com/handbook/legal/modern-slavery-act-transparency-statement/","modern slavery transparency statement",{"title":647,"links":648},"Contact Us",[649,652,654,656,661,666,671],{"text":650,"config":651},"Contact an expert",{"href":49,"dataGaName":50,"dataGaLocation":487},{"text":379,"config":653},{"href":381,"dataGaName":382,"dataGaLocation":487},{"text":384,"config":655},{"href":386,"dataGaName":387,"dataGaLocation":487},{"text":657,"config":658},"Status",{"href":659,"dataGaName":660,"dataGaLocation":487},"https://status.gitlab.com/","status",{"text":662,"config":663},"Terms of use",{"href":664,"dataGaName":665,"dataGaLocation":487},"/terms/","terms of use",{"text":667,"config":668},"Privacy statement",{"href":669,"dataGaName":670,"dataGaLocation":487},"/privacy/","privacy statement",{"text":672,"config":673},"Cookie preferences",{"dataGaName":674,"dataGaLocation":487,"id":675,"isOneTrustButton":103},"cookie preferences","ot-sdk-btn",{"items":677},[678,680,682],{"text":662,"config":679},{"href":664,"dataGaName":665,"dataGaLocation":487},{"text":667,"config":681},{"href":669,"dataGaName":670,"dataGaLocation":487},{"text":672,"config":683},{"dataGaName":674,"dataGaLocation":487,"id":675,"isOneTrustButton":103},"content:shared:en-us:main-footer.yml","Main Footer","shared/en-us/main-footer.yml","shared/en-us/main-footer",[689],{"_path":690,"_dir":691,"_draft":6,"_partial":6,"_locale":7,"content":692,"config":696,"_id":698,"_type":26,"title":18,"_source":28,"_file":699,"_stem":700,"_extension":31},"/en-us/blog/authors/marcia-ramos","authors",{"name":18,"config":693},{"headshot":694,"ctfId":695},"https://res.cloudinary.com/about-gitlab-com/image/upload/v1749659488/Blog/Author%20Headshots/gitlab-logo-extra-whitespace.png","Marcia-Ramos",{"template":697},"BlogAuthor","content:en-us:blog:authors:marcia-ramos.yml","en-us/blog/authors/marcia-ramos.yml","en-us/blog/authors/marcia-ramos",{"_path":702,"_dir":34,"_draft":6,"_partial":6,"_locale":7,"header":703,"eyebrow":704,"blurb":705,"button":706,"secondaryButton":710,"_id":712,"_type":26,"title":713,"_source":28,"_file":714,"_stem":715,"_extension":31},"/shared/en-us/next-steps","Start shipping better software faster","50%+ of the Fortune 100 trust GitLab","See what your team can do with the intelligent\n\n\nDevSecOps platform.\n",{"text":42,"config":707},{"href":708,"dataGaName":45,"dataGaLocation":709},"https://gitlab.com/-/trial_registrations/new?glm_content=default-saas-trial&glm_source=about.gitlab.com/","feature",{"text":47,"config":711},{"href":49,"dataGaName":50,"dataGaLocation":709},"content:shared:en-us:next-steps.yml","Next Steps","shared/en-us/next-steps.yml","shared/en-us/next-steps",1758326241097]