CKEditor 4 - How to add H2, H3, etc to toolbar - ckeditor

Question

Looking at these docs: https://ckeditor.com/docs/ckeditor4/latest/features/styles.html
So adding a style set should go something like this, but I can't get the H2 or H3 items to appear in my toolbar:
CKEDITOR.stylesSet.add( 'my_styles', [
// Block-level styles
{ name: 'Blue Title', element: 'h2', styles: { 'color': 'Blue' } },
{ name: 'Red Title' , element: 'h3', styles: { 'color': 'Red' } },
// Inline styles
{ name: 'CSS Style', element: 'span', attributes: { 'class': 'my_style' } },
{ name: 'Marker: Yellow', element: 'span', styles: { 'background-color': 'Yellow' } }
] );
CKEDITOR.editorConfig = function( config ) {
config.extraPlugins = 'firstname,MediaEmbed,justify,image';
//config.forcePasteAsPlainText = true;
config.extraAllowedContent = 'iframe[*]';
config.toolbar = 'Normal';
config.toolbar_Normal = [
{ name: 'basicstyles', items: [ 'Bold', 'Italic','Underline','Strike' ] },
{ name: 'paragraph', items: [ 'NumberedList', 'BulletedList', 'JustifyLeft', 'JustifyCenter', 'JustifyRight' ] }
];
config.toolbar_Emails = [
{ name: 'basicstyles', items: [ 'Bold', 'Italic','Underline','Strike' ] },
{ name: 'paragraph', items: [ 'NumberedList', 'BulletedList', 'JustifyLeft', 'JustifyCenter', 'JustifyRight' ] }
];
config.removeDialogTabs = 'link:advanced;link:target';
config.stylesSet = 'my_styles';
};

Answer 1

As mentioned in the docs
Open the config.js file available in your ckeditor directory, and edit the config.format_tags entry in the following way to display the text formatting toolbar.
// Enable all default text formats:
config.format_tags = 'p;h1;h2;h3;h4;h5;h6;pre;address;div';
// Enable a limited set of text formats:
config.format_tags = 'p;h1;h2;pre;div';